css3 gradient线性渐变-边框渐变

有时候我们希望边框呈渐变色，比如像下面这样，这要用到css3属性就可以实现。

 一、渐变基本语法

在画这些图片之前，我们应该要清楚以下渐变用法。webkit核心浏览器下的的基本语法如下：

　　　　-webkit-gradient(type, start_point, end_point, / stop...)
参数如下：

type	渐变的类型，可以是线性渐变(linear)或是径向渐变(radial)
start_point	渐变图像中渐变的起始点
end_point	渐变图像中渐变的结束点
stop	color-stop()方法，指定渐变进程中特定的颜色

　说明：1、start_point和end_point

　　　　　start_point(x1,x2)，end_point(x2,y2)，这里的x,y对应左上角为起点的坐标，此处的x,y参数表示与CSS中的background-position是一致的，可以使像素值，或是百分比值或是left,top,right,bottom。
　　　　　　当x1等于x2，y1不等于y2，实现垂直渐变，调整y1，y2的值可以调整渐变半径大小；
　　　　　　当y1等于y2，x1不等于x2，实现水平渐变，调整x1，x2的值可以调整渐变半径大小；
　　　　　　当y1不等于y2，x1不等于x2，实现角度渐变，当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变；
　　　　　　当x1等于x2，y1等于y2，实现没有渐变，取from色，即“ from(颜色值) ”；

　　　　2、color-stop()

　　　　　　过渡点。有两个参数，一个是点的位置，另外一个是过渡点的颜色。如：color-stop(0.5, #ff0000)

 二、图形画法实例

本篇所有的边框渐变实际上都是分成两部分来画，用伪类元素before与after来实现

（一）

效果图1:

源代码：

html:

<div class="bor-div1"></div>

css:

.bor-div1 {
　　width: 100px;
　　height: 100px;
　　-webkit-transform: rotate(90deg);
}

.bor-div1:before {
    content: "";
    display: block;
    width: 100px;
    height: 50px;
    margin-top: 10px;
    padding: 10px;
    padding-bottom: 0;
    box-sizing: border-box;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;

    background: -webkit-gradient( linear, left top, right top, color-stop(0, #fff), color-stop(1, #fff)), -webkit-gradient( linear, left top, right top, color-stop(0, #077df8), color-stop(1, #74baff));
    background-clip: content-box, padding-box;
}

.bor-div1:after {
    content: "";
    display: block;
    width: 100px;
    height: 50px;
    padding: 10px;
    padding-top: 0;
    box-sizing: border-box;

    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background: -webkit-gradient( linear, left top, right top, color-stop(0, #fff), color-stop(1, #fff)), -webkit-gradient( linear, left top, right top, color-stop(0, #fff), color-stop(1, #74baff));
    background-clip: content-box, padding-box;
}

 适当改变一下上面的颜色渐变，可以得到效果图2

css:

.bor-div1:before{
      background: -webkit-gradient( linear, left top, right top, color-stop(0, #fff), color-stop(1, #fff)), 
        -webkit-gradient( linear, left top, right top, color-stop(0, #077df8), color-stop(0.3, #077df8), color-stop(0.3, #FB1D32), color-stop(0.6, #FB1D32), color-stop(0.6, #0ABB6C), color-stop(0.8, #0ABB6C), color-stop(0.8, #595757), color-stop(1, #595757));
}
.bor-div1:after{
      background: -webkit-gradient( linear, left top, right top, color-stop(0, #fff), color-stop(1, #fff)), 
        -webkit-gradient( linear, left top, right top, color-stop(0, #595757), color-stop(0.3, #595757), color-stop(0.3, #0ABB6C), color-stop(0.6, #0ABB6C), color-stop(0.6, #FB1D32), color-stop(0.8, #FB1D32), color-stop(0.8, #077df8), color-stop(1, #077df8));  
}

转载于:https://www.cnblogs.com/xieshu/p/5465780.html