border-style

border-style 属性是用于指定元素边框的线条样式(实线,双线,虚线等)的缩写属性,除非有边框图像(border-image)的情况。

它是属性 border-top-style,border-right-style,border-bottom-style 和 border-left-style 的缩写形式。

可以使用一个,两个,三个或四个组件指定 border-style 属性的值。

这里是重点:

当使用一个值时,该值指定顶部,右侧,底部和左侧边框的样式; 如果使用两个值,第一个值指定顶部和底部边框的样式,第二个值指定右边框和左边框的样式;如果使用三个值,第一个指定顶部边框的样式,第二个指定右边框和左边框的样式,第三个指定底部边框的样式; 如果使用四个值,则第一,第二,第三和第四值分别指定顶,右,底和左边框的样式。

例如:

border-style: solid;
border-style: solid solid;
border-style: solid double solid ;
border-style: solid double solid double;

在你的心里默默地说出以上的参数分别是哪些边吧?如果说对了,那么你就学懂了。

接着我们来看看它的参数值吧:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

这个属性的默认值为 none,也就是说默认是没有边框的。

以下图例就是我们所有的参数值的实际样式:

各 style 样式

但是并非所有浏览器都可以以相同的方式呈现样式。 例如,Chrome 当前将点显示为矩形点而不是圆形点。

也就是这样:

示例

当然,90% 以上的情况下,我们都是使用 solid 参数值。这些我们作为了解,后面的那几个基本来说,我们很少会用的。

好啦,这节也到此为止啦。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,592评论 1 82
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 562评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 575评论 0 9
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 66,911评论 12 114
  • 收藏之路对藏界而言是在风口浪尖中徘徊,有些人收藏悟道心得一辈子始终还在十字口中思索,有些人一朝悟道出收藏的门类。收...
    中亚艺术阅读 90评论 0 0