主要涉及三个点:渐变、阴影、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