css3使边框具有渐变的效果_border-top-color 渐变

作者：笔触狂放9 | 2024-05-13 15:21:10

踩

border-top-color 渐变

css3中border-color属性包含有border-top-color, border-right-color, border-bottom-color , border-left-color四条边的属性设置。

使用CSS3的border-radius属性，可以设置边框不同的颜色。

如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。

例子：


<!DOCMENT HTML>
<html>
    <head>
        <style>
            #one{width:300px;height:50px;border:10px solid green;-moz-border-bottom-
 
colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-top-colors: #555 #666 #777 #888 #999
 
#aaa #bbb #ccc;-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;-moz-border-right-
 
colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;}
        </style>
    </head>
    <body>
        <div id="one"></div>
    </body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/564115