18
2020
04

CSS多色边框border-colors

多色边框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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。