html边框颜色线性渐变,CSS线性渐变linear-gradient() 函数实现div边框四角样式

先看下要实现的效果。

四个角边框高亮

css代码实现 红色框box-red样式，蓝色的只是变换了颜色。box-title是图上渐变实现。

.box-red {

background: linear-gradient(#993333, #993333) left top, linear-gradient(#993333, #993333) left top, linear-gradient(#993333, #993333) right top, linear-gradient(#993333, #993333) right top, linear-gradient(#993333, #993333) left bottom, linear-gradient(#993333, #993333) left bottom, linear-gradient(#993333, #993333) right bottom, linear-gradient(#993333, #993333) right bottom;

background-repeat: no-repeat;

background-size: 2px 20px, 20px 2px;

}

.box-red .box-title {

height: 40px;

line-height: 40px;

font-size: 1.2em;

font-weight: 500;

background-image: linear-gradient(to right, rgba(204, 0, 51, 0), rgba(204, 0, 51, 0.4), rgba(204, 0, 51, 0));

background-repeat: no-repeat;

}

linear-gradient() 函数用于创建一个线性渐变的 “图像”。

linear-gradient( [ | to ,]? [, ]+ )

为了创建一个线性渐变，你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

例如下面，设置背景从右侧开始渐变

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);