CSS border-style 属性

本文详细介绍了CSS边框样式的基本概念、属性定义、用法,并通过具体例子展示了如何设置不同样式的边框,包括点状、实线、双线等。同时,解释了各个属性值的含义和浏览器兼容性。

http://www.w3school.com.cn/css/pr_border-style.asp定义和用法

border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

例子 1
border-style:dotted solid double dashed; 
  • 上边框是点状
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线
例子 2
border-style:dotted solid double;
  • 上边框是点状
  • 右边框和左边框是实线
  • 下边框是双线
例子 3
border-style:dotted solid;
  • 上边框和下边框是点状
  • 右边框和左边框是实线
例子 4
border-style:dotted;
  • 所有 4 个边框都是点状
默认值: not specified
继承性: no
版本: CSS1
JavaScript 语法: object.style.borderStyle="dotted double"

实例

设置 4 个边框的样式:

p
  {
  border-style:solid;
  }

TIY

浏览器支持

所有浏览器都支持 border-style 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。

描述

最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过,CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗,也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定,创作人员对这个决定没有任何影响。

<template> <div style="font-size: 24px; color: #010206"> &nbsp录入设备隐患MAP信息</div> <div> <a-card> <a-form :model="form" > <a-form-item label="部&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp门&nbsp&nbsp&nbsp&nbsp&nbsp "> <!-- <input type="text" style="width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 4px; padding: 5px; placeholder=请输入部门名称 style=color: #999">--> <a-input placeholder="例如:MLCC制造" style="color: #999 ;width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 4px;" /> </a-form-item> <a-form-item > <el-radio-group v-model="radio" > <el-radio :value="3">一区</el-radio> <el-radio :value="6">二区</el-radio> </el-radio-group> </a-form-item> <!-- --> <a-form-item label="工&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp程&nbsp&nbsp&nbsp&nbsp&nbsp"> <a-input placeholder="例如:配器" style="color: #999 ;width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 4px;" /> </a-form-item> <!-- -------------------------****************************************************************************--> <a-form-item label="安全环境担当"> <a-input placeholder="" style="color: #999 ;width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 4px;" /> </a-form-item> <!-- -- -------------------------****************************************************************************--> <a-form-item label="隐患点MAP名称"> <a-input placeholder="" style="color: #999 ;width: 300px; height: 30px; border: 1px solid #ccc; border-radius: 4px;" /> </a-form-item> <a-form-item label=" &nbsp MAP图连接&nbsp&nbsp&nbsp&nbsp&nbsp "> <a-input placeholder="" style="color: #999 ;width: 300px; height: 30px; border: 1px solid #ccc; border-radius: 4px;" /> </a-form-item> <a-form-item style="margin-left: 120px;"> <a-button type="primary" @click="save"> 上传</a-button> </a-form-item> </a-form> </a-card> </div> </template> <script setup> </script> <style scoped lang="less"> </style>根据我的代码信息,帮我完善一下,大小,对齐等等完美点
最新发布
09-02
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值