saber 酱的抱枕

Fly me to the moon

10/24
2014
学习

css3的渐变

这是一个常规的线性渐变,其在chrome下代码如下:

background:-webkit-gradient(linear, 0% 0%, 00% 100%, from(yellow), to(orange));

不要担心这些语法会让你看花眼,我也是这样的!只要记得我们需要用一个逗号来隔开这个参数组。
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(color))
结束的颜色? (to(color))

调整了起始点和终点的样式:

同上chrome下的代码:

background:-webkit-gradient(linear, 20% 10%, 10% 90%, from(yellow), to(orange));

为了兼容性考虑可以在渐变之前写一个纯色背景;颜色可以用rbg/rgba格式或16进制颜色

包含ff的代码请看这里

css3的渐变