如何实现多色CSS边框
小编给大家分享一下如何实现多色CSS边框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
多色CSS边框
如果我们想给边框加上比前面的示例更多的颜色怎么办?
我们甚至可以将元素的每一面都设置为不同的颜色。
为此,我们将需要一些带有渐变的自定义背景。
看下面的例子。
#box{font-family:Arial;font-size:18px;line-height:30px;font-weight:bold;color:white;padding:40px;background:linear-gradient(totop,#4caf50,#4caf5010px,transparent10px),linear-gradient(toright,#c1ef8c,#c1ef8c10px,transparent10px),linear-gradient(tobottom,#8bc34a,#8bc34a10px,transparent10px),linear-gradient(toleft,#009688,#00968810px,transparent10px);background-origin:border-box;}
效果:
以上是“如何实现多色CSS边框”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注恰卡编程网行业资讯频道!