css中如何实现border边框颜色渐变代码详解
程序员文章站
2022-03-31 09:44:27
...
在css中,如果一条边框线有n像素的宽度,那么就可以对其设置n种不同的颜色。
在代码中,我们可以定义一条宽为7px的实线:border: 7px solid #C8C8C8;(不要在意此处设置的颜色,在firefox中后面的代码中会被新设置的颜色覆盖掉)
如果对border中四边的边框同时设置渐变的颜色,如下述代码所示:
<html> <head> <style> p{ height: 100px; width: 100px; border: 7px solid red; border-color: red green yellow black; } </style> </head> <body> <p></p> </body> </html>
运行html文件后,我们得到的效果如下:
代码会将我们设置的颜色自动分配给 top、right、bottom、left,以顺时针的形式分配。如果我们只设置3个颜色,那么结果显而易见,直接分配给top、right、bottom这三个方向的边框了。因此,为了让代码知道我们不是要按此规则设置边框颜色,应该分别对每个方向的边框设置渐变颜色,其代码如下:
<html> <head> <style> p{ height: 100px; width: 100px; background: #E8F5FC; border: 7px solid red; -moz-border-top-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-right-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-bottom-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; -moz-border-left-colors: #FDFDFD #F9F9F9 #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8; } </style> </head> <body> <p></p> </body> </html>
其执行结果如下:
需要注意的是,border的边框颜色设置是从外向内的,所以第一个颜色编码是最外层颜色,而最后一个颜色编码是最内层的颜色。
以上就是css中如何实现border边框颜色渐变代码详解的详细内容,更多请关注其它相关文章!
上一篇: 源码:php文字转图片的类
下一篇: JavaScript基础知识点学习总结
推荐阅读
-
实现CSS3中的border-radius(边框圆角)示例代码
-
css中的border-collapse属性如何设置表格边框线?(代码示例)
-
css中linear-gradient()函数是干什么的?实现线性渐变的圆形边框(代码)
-
css3中颜色线性渐变色彩的实现代码
-
CSS中border-spacing和cellspacing如何实现1px细边框的两种方法
-
CSS中border-spacing和cellspacing如何实现1px细边框的两种方法
-
css3中颜色线性渐变色彩的实现代码
-
css中的border-collapse属性如何设置表格边框线?(代码示例)
-
css中如何实现border边框颜色渐变代码详解
-
css中如何实现border边框颜色渐变代码详解