随身笔记
随身笔记

linear-gradient实用详解

css3 background 条纹 背景 渐变

linear-gradient是background-image属性下的参数,在网上找遍了许多教程讲的都很详细
但是往往都没有讲到重点,说的也长篇大论。花了几十分钟看完也没看懂那些参数具体是
怎么实用。这里图文并茂讲解快速上手linear-gradient。

首先看下这个效果:

bglinear1

这里教大家如何用CSS3代码绘画出这个图案,例子简单重点是叫大家里面的参数具体是什么意思
1,首先做出一个小图片
bglinear2

background-image: linear-gradient(135deg,#fff 16%, #0ae 17%,#0ae 33%, #fff 34%,#fff 66%, #0ae 67%,#0ae 83%, #fff 84%);
background-image: linear-gradient(顺时针角度, 开始颜色 结束位置, 中间颜色1 开始位置,中间颜色1 结束位置, 中间颜色2 开始位置,中间颜色2 结束位置, 中间颜色3 开始位置,中间颜色3 结束位置, 结束颜色 开始位置);

如果数字不是连续的,他们之间存在数值差,那么数值差的之间的两种颜色默认就是渐变效果。

(*注意:百分比指的不是大小而是位置,可以用PX 来代替)

此时绘制完的只是一张单张的图片想实现图1的效果需要追加入以下属性

background-repeat:repeat;
background-size:50px 50px;

写到这里应该会明白了吧,只要做出一个小图片剩下的就是平铺。

http://www.cnblogs.com/lhb25/archive/2013/02/17/css3-linear-gradient.html

随身笔记

linear-gradient实用详解
css3 background 条纹 背景 渐变 linear-gradient是background-image属性下的参数,在网上找遍了许多教程讲的都很详细 但是往往都没有讲到重点,说的也长篇大论。花了几十分钟看完也…
扫描二维码继续阅读
2014-12-22