边框的渐变

Posted 2023-03-21

参考技术A 针对边框的渐变色其实有两种理解:

第一种是纯边框：

写法是：

border:1px solid #ddd;

border-image: -webkit-linear-gradient(#da9f11, #daa21e , #dbbc7b) 20 20;

border-image: -moz-linear-gradient(#da9f11, #daa21e , #dbbc7b) 20 20;

border-image: -o-linear-gradient(#da9f11, #daa21e , #dbbc7b) 20 20;

border-image: linear-gradient(#da9f11, #daa21e , #dbbc7b) 20 20;

 第二种：

利用背景色的渐变进行遮盖重叠达到边框的显示的效果（保证内层是要有背景色，不然效果实现不了）

如何用css使边框颜色渐变

一、CSS3 中的边框颜色 这里是一个10px宽的标准边框和边框颜色： #borderColor border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; 二、有圆角的边框颜色 #borderColorCorner border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; 参考技术A background-color:#a0a #909 #808 #707 #606 #505 #404 #303;

background -color 属性的参数很简单，可以是任意合法的颜色值或颜色值列表，当background -color只设置了一个颜色时，那么就是单色的。如果设置了n中颜色而边框宽度也为n的话那么每一个像素显示一种颜色，如果边框宽度值大于颜色数值时，最后一种颜色用于显示剩下的宽度。 参考技术B 浏览器兼容性不好，注意使用