多色边框border-colors可以在一条边框上设置多种颜色
[注意]只有firefox支持,需要加-moz-前缀,且只能四条边分开写,否则无效
border-colors:<color><color>……
border: 10px solid black;
-moz-border-top-colors: red green;
-moz-border-right-colors: green yellow;
-moz-border-bottom-colors: yellow blue;
-moz-border-left-colors: blue red;
边框有以下几个要点需要特别注意:
1、边框绘制在元素背景之上,如果边框样式有某种缝隙,可以通过这些缝隙看到元素的背景(有兼容问题)
2、同一元素的边框相交处是斜线,可以用边框实现三角形
3、行内元素的上下边框由于不影响行高,不影响布局;左右边框会影响布局
4、在CSS2.1中,背景定位background-position只能相对于左上角定位。如果需要是相对于右侧,则可以使用一个右侧的透明边框来实现类似的效果
边框单边
border-top/border-right/border-bottom/border-left
边框属性
border-width:
border-top-width border-right-width
border-bottom-width border-left-width
border-style:
border-top-style border-right-style
border-bottom-style border-left-style
border-color:
border-top-color border-right-color
border-bottom-color border-left-color
【四值顺序】
border-width: 1px 2px 3px 4px;//上右下左
border-width: 1px 2px 3px;//上(左右)下
border-width: 1px 2px;//(上下)(左右)
border-width: 1px;//(上下左右)
原文链接:https://www.qiquanji.com/post/8731.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知