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);