标签：style color 边框 width 宽度 border CSS 属性
border-style（边框风格）
- 定义边框的风格，值可以有：
none：没有边框，当border的值为none的时候，系统将会忽略[border-color]
hidden：隐藏边框，低版本浏览器不支持。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双实线边框，两条单线与其间隔的和等于border-width值。
- border-style的值可以缩写：
只有一个值的时候表示同时控制上下左右的边框风格。 只有两个值的时候表示分别控制上下、左右的边框风格。 有三个值的时候表示分别控制上、左右、下的边框风格。 有四个只的时候表示分别控制上、右、下、左的边框风格。示例： <style> div{ border-style: dotted ; //表示上下左右都是点状边框 border-style: dotted dashed ; ; //表示上下为点状边框，左右为虚线边框 border-style: dotted dashed solid ; //表示上为点状边框，左右为虚线边框，下为实线边框 border-style: dotted dashed solid double ; //表示上为点状边框，右为虚线边框，下为实线边框，右为双实线边框 } </style>
- border-style还可以单独指定不同方向：
border-top-style 设置上边的边框风格 border-bottom-style 设置下边的边框风格 border-left-style 设置左边的边框风格 border-right-style 设置右边的边框风格
border-width（边框宽度）
- 使用border-width可以定义边框的厚度
值可以是medium，thin，thick和指定数值的宽度。
- border-width也可以进行缩写：
只有一个值的时候表示同时控制上下左右的边框宽度。 只有两个值的时候表示分别控制上下、左右的边框宽度。 有三个值的时候表示分别控制上、左右、下的边框宽度。 有四个只的时候表示分别控制上、右、下、左的边框宽度。 - border-width也可以单独指定不同方向：
border-top-width 设置上边的边框宽度 border-bottom-width 设置下边的边框宽度 border-left-width 设置左边的边框宽度 border-right-width 设置右边的边框宽度
border-color（边框颜色）
定义边框的颜色，值表示的方式可以是十六进制，RGB十进制和单词表示法。
- border-color的缩写
只有一个值的时候表示同时控制上下左右的边框颜色。 只有两个值的时候表示分别控制上下、左右的边框颜色。 有三个值的时候表示分别控制上、左右、下的边框颜色。 有四个只的时候表示分别控制上、右、下、左的边框颜色。 - border-color也可以单独指定不同方向
border-top-color 设置上边的边框颜色 border-bottom-color 设置下边的边框颜色 border-left-color 设置左边的边框颜色 border-right-color 设置右边的边框颜色
边框样式缩写
还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写
语法：border: 边框宽度 边框样式 边框颜色;
注意：border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样式。
标签：style,color,边框,width,宽度,border,CSS,属性 来源： https://www.cnblogs.com/xialiang37/p/15741459.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。