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-ri
ght-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));  
}

边框渐变

posted @ 2016-05-09 13:00  我是大叔不是小叔  阅读(1342)  评论(0编辑  收藏  举报