如何实现多色边框,border-colors属性详解

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

在css样式中,很多初学css不知道怎么用css实现多色边框?其实如何实现多色边框我们可以用到border-colors属性,那么?css如何实现多色边框?下面我们来总结一下border-colors属性。

在css3中,我们可以用border-colors来制作多颜色的边框,但是也有很多人总把border-color和border-colors弄混淆,我们这里用到的是border-colors,并不是border-color。

border-colors语法:

-moz-border-left-colors:颜色值;对于border-colors属性,我们要注意三点:

1.如果border-width为w像素,就表示边框可以几种颜色,但是前提每种颜色都是颜色限制唯一的宽度。

2.因为border-colors并不能所有的浏览器都是使用,因此我们在代码前面加一个-moz-。

3.我们不能同时设置四条边颜色,但是我们可以分为四段颜色为四条边的设置。

实例:

<!DOCTYPE html> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title>CSS3 border-colors属性</title>     <style type="text/css">     #div1     {         width:200px;         height:100px;         border-width:5px;         border-style:solid;         -moz-border-top-colors:red orange yellow green cyan blue purple;         -moz-border-right-colors: red orange yellow green cyan blue purple;         -moz-border-bottom-colors: red orange yellow green cyan blue purple;         -moz-border-left-colors: red orange yellow green cyan blue purple;     }     </style> </head> <body>     <div id="div1">     </div> </body> </html>

具体代码效果:

如何实现多色边框,border-colors属性详解

如何实现多色边框,border-colors属性详解

分析:在以上可以看到border-width:5px;说明使用了5中颜色,那么边框的设置我们就可以使用五种颜色。

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何实现多色边框,border-colors属性详解

发表评论

提供最优质的资源集合

立即查看 了解详情