[前端小博客]做一个萌萌哒的button之渐变

       主要涉及三个点：渐变、阴影、data-icon。本着轻博客，每天轻松一个点的原则，将分三篇进行。^v^这一篇是渐变篇。本文以webkit核心浏览器为例，各个浏览器支持情况如下图：

1.webkit核心浏览器下的的基本语法如下：

-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)

参数

参数类型	简要说明
type	渐变的类型，可以是线性渐变(linear)或是径向渐变(radial)
start_point	渐变图像中渐变的起始点
end_point	渐变图像中渐变的结束点
stop	color-stop()方法，指定渐变进程中特定点的特定颜色
inner_center	内部中心点，径向渐变起始圆环
inner_radius	内部半径，径向渐变起始圆
outer_center	外部渐变结束圆的中心点
outer_radius	外部渐变结束圆的半径

       这个demo中两种渐变均有用到。

2.线性渐变

       图中红线内部分是为了让了button更立体，代码如下：

a:after {
content: "";
background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, .55)),
to(rgba(255, 255, 255, .5)), color-stop(.5, rgba(255, 255, 255, 0)),
color-stop(.8, rgba(255, 255, 255, 0)));

}

 

        沿着X轴的线性渐变,起始点为(0%,0)，终止点为(100%,0)。颜色从rgba(255, 255, 255, .55)渐变到rgba(255, 255, 255, .5)。 rgba(255, 255, 255, .55)中0.55代表着透明度，从0到1为全透明到不透明。中间有两个stop点，在这两个点为全透明。

        color-stop()就是过渡点，这些过渡点有两个参数，一个是点的位置，另外一个是过渡点的颜色。为了看的更明显，我将两个stop点的颜色改变如下：

background-image: -webkit-gradient(linear, 0% 0, 100% 0, from(rgba(255, 255, 255, .55)),
to(rgba(255, 255, 255, .5)), color-stop(.5, rgba(0, 255, 255, 1)),
color-stop(.8, rgba(255, 0, 255, 1)));

 

3.径向渐变
       demo中下图红色框内使用了径向渐变，另外一幅图为取消渐变的效果图，可以看出渐变使我们的button看起来像果冻一样q。

background-image: -webkit-gradient(radial, 50% 0, 0, 50% 0, 100,
from( rgba(255,255,255,0) ),
to( rgba(255,255,255,0.7) ));

       渐变范围为从圆心为(50%,0)，半径为0的内圆到圆心也是(50%,0)，半径为100的圆。为了看的更明显，我将渐变颜色值改变如下：

background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0,
from( rgba(0,255,255,1) ),
to( rgba(255,255,0,1) ));

 

       demo戳这里：http://runjs.cn/detail/lchdzux7