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(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )

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

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

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