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,我们将及时处理。

微信扫码关注

更新实时通知