先看下要实现的效果。
四个角边框高亮
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);
