如何用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; }

借助background-position实现渐变过渡

background-image虽然不支持CSS3 transition过渡，但是background-position支持啊，于是，通过控制背景位置，我们是可以实现渐变过渡效果的。

实现效果如下（鼠标hover）：

借助background-color实现渐变过渡

background-image虽然不支持CSS3 transition过渡，但是background-color支持啊，于是，通过控制背景颜色，和一个颜色呈现技巧，我们也是可以实现渐变过渡效果的。

鼠标hover前后效果对比：

借助伪元素和opacity实现渐变过渡

借助伪元素创建变换后的渐变效果，通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。

下图为hover之后的效果：

相关代码如下：

扩展资料：

mozilla 使用 CSS transitions

使用transition属性，可以设置css属性的渐变，本例中：
transition:background-color 3s ease-in 0s;
语句的意思是：要渐变的属性为background-color；渐变过程持续3s；渐变的方式为ease-in；延迟0s后开始渐变。
渐变方式可以简单的理解为变化速度的曲线，有多种选择，ease-in是其中一种。
上述方法是transition属性的简写方法，实际上他还可以分割写为四个单独的属性，上边的语句分割后的写法为：
transition-property:background-color;transition-duration: 3s;transition-timing-function: ease-in;transition-delay: 0s;
若是需要改变多个属性的渐变，可以使用分开写的方式，属性事件用，分隔，顺序相互对应即可。

为兼容各大浏览器
body要是渐变色，只能用来完成（左右渐变背景图）。
为兼容主流显示器，请用1440宽度以上的图来完成，高度可以适中50-100px即可。
不要用高度1px的图，影响渲染速度。

<h2 class="text-gradient">CSS如何实现文字颜色渐变的实例</h2>
<style>
text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微软雅黑';
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};
</style>

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
实例
从上到下的线性渐变：
#grad {
background: -webkit-linear-gradient(red, blue); / Safari 51 - 60 /
background: -o-linear-gradient(red, blue); / Opera 111 - 120 /
background: -moz-linear-gradient(red, blue); / Firefox 36 - 15 /
background: linear-gradient(red, blue); / 标准的语法 /
}
-----------------------------------------------------------------------
径向渐变（Radial Gradients）- 由它们的中心定义
实例
颜色结点均匀分布的径向渐变：
#grad {
background: -webkit-radial-gradient(red, green, blue); / Safari 51 - 60 /
background: -o-radial-gradient(red, green, blue); / Opera 116 - 120 /
background: -moz-radial-gradient(red, green, blue); / Firefox 36 - 15 /
background: radial-gradient(red, green, blue); / 标准的语法 /
}

---