css3渐变和阴影

快来打我* 2021-09-12 05:58 462阅读 0赞

[蒙版/渐变][Link 1]

①  -webkit-gradient(<type>, <x1 y1>, <x2 y2> , from(颜色1) ,to(颜色2))

渐变类型type:linear（线性渐变）或者radial（径向渐变）

渐变起点;x1,y1(可以用left，top等表示)

渐变终点:x2,y2(可以用left，bottom等表示)

background: -webkit- gradient(linear, left top, left bottom, \#bccfe3, \#d2dded);

②最新式的写法:

线性渐变：

-webkit-linear-gradient(渐变起点,颜色1,颜色2);

-webkit-linear-gradient(top,\#ace,\#f96);

径向渐变：

-webkit-radial-gradient(渐变起点,颜色1,颜色2);

-webkit-radial-gradient(top,\#ace,\#f96);

![20170426104224991][]

③彩虹式渐变(含百分百)

background: -moz-linear-gradient(left, \#ace, \#f96 5%, \#ace, \#f96 95%, \#ace);

background: -webkit-gradient(linear, left top, right top, from(\#ace), color-stop(0.05, \#f96), color-stop(0.5, \#ace), color-stop(0.95, \#f96), to(\#ace));

![20170426104340721][]

④放射性渐变radial

background: -moz-radial-gradient(\#ace, \#f96, \#1E90FF);  
    background: -webkit-radial-gradient(\#ace, \#f96, \#1E90FF);

![20170426105958781][]

background: -moz-radial-gradient(\#ace 5%, \#f96 25%, \#1E90FF 50%);  
 background: -webkit-radial-gradient(\#ace 5%, \#f96 25%, \#1E90FF 50%);  
![20170426110046359][]

background: -moz-radial-gradient(bottom left,circle, \#ace, \#f96, \#1E90FF);  
background: -webkit-radial-gradient(bottom left, circle, \#ace, \#f96, \#1E90FF);

![20170426111157589][]

⑤制作背景图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>测试</title> <style type="text/css"> *,ul,li{ margin:0; padding:0; border:0; list-style: none; } ul { overflow: hidden; margin: 40px; } li{ width: 150px; height: 80px; margin-bottom: 10px; float: left; margin-right: 5px; background: #ace; /*Controls the size*/ -webkit-background-size: 20px 20px; -moz-background-size: 20px 20px; background-size: 20px 20px; } li.gradient1 { background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) ); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); background-image: -o-linear-gradient( 45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); background-image: linear-gradient( 45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, gba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); } li.gradient2 { background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); } li.gradient3 { background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); } li.gradient4 { background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); } li.gradient5 { background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555)); background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%); } li.gradient6 { background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))); } </style> </head> <body> <ul> <li class="gradient gradient1"></li> <li class="gradient gradient2"></li> <li class="gradient gradient3"></li> <li class="gradient gradient4"></li> <li class="gradient gradient5"></li> <li class="gradient gradient6"></li> </ul> </body> </html>

![20170426111214230][]

⑥线性渐变在IE的应用：

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=\#1471da, endColorstr=\#1C85FB);/\*IE<9>\*/  
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=\#1471da, endColorstr=\#1C85FB)";/\*IE8+\*/

IE依靠滤镜实现渐变。startColorstr表示起点的颜色，endColorstr表示终点颜色。

GradientType表示渐变类型，0为缺省值，表示垂直渐变，1表示水平渐变。

⑦Firefox支持两种类型的CSS渐变

线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

[Link 1]: http://www.w3cplus.com/content/css3-gradient
[20170426104224991]: /images/20210813/b603920676f0401da95eb15fae9e4ad0.png
[20170426104340721]: /images/20210813/676d4adee7a54fce9eb3614fd585451d.png
[20170426105958781]: /images/20210813/818bcd4a9ea84cb99c4da3699a1dea3c.png
[20170426110046359]: /images/20210813/75355728671742c495218799913eca2b.png
[20170426111157589]: /images/20210813/3f9ed6e94f9b452498908eb2a9120b07.png
[20170426111214230]: /images/20210813/1388c3a4ef664845a07cc965675f0f78.png