CSS 阴影

box-shadow: 盒子阴影

(inset  向里走了 内阴影()) X轴偏移量   Y轴偏移量     模糊半径(可以负值)               扩散半径
box-shadow:[inset] x y blur [spread] color
    参数
        inset:投影方式
            inset:内投影
            不给:外投影
        x、y:阴影偏移
        blur:模糊半径
        spread:扩展阴影半径
            先扩展原有形状,再开始画阴影
        color

*** 阴影可以叠加

 .box-shadow-1{  
11       -webkit-box-shadow: 3px 3px 3px;  
12       -moz-box-shadow: 3px 3px 3px;  
13       box-shadow: 3px 3px 3px;  
14     }  
15     .box-shadow-2{  
16       -webkit-box-shadow:0 0 10px #0CC;  
17       -moz-box-shadow:0 0 10px #0CC;  
18       box-shadow:0 0 10px #0CC;  
19     }  
20     .box-shadow-3{  
21       -webkit-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
22       -moz-box-shadow:0 0 10px rgba(0, 204, 204, .5);  
23       box-shadow:0 0 10px rgba(0, 204, 204, .5);  
24     }  
25     .box-shadow-4{  
26       -webkit-box-shadow:0 0 10px 15px #0CC;  
27       -moz-box-shadow:0 0 10px 15px #0CC;  
28       box-shadow:0 0 10px 15px #0CC;  
29     }  
30     .box-shadow-5{  
31       -webkit-box-shadow:inset 0 0 10px #0CC;  
32       -moz-box-shadow:inset 0 0 10px #0CC;  
33       box-shadow:inset 0 0 10px #0CC;  
34     }  
35     .box-shadow-6{  
36         box-shadow:-10px 0 10px red, /*左边阴影*/  
37         10px 0 10px yellow, /*右边阴影*/  
38         0 -10px 10px blue, /*顶部阴影*/  
39         0 10px 10px green; /*底边阴影*/  
40     }  
41     .box-shadow-7{  
42         box-shadow:0 0 10px 5px black,  
43         0 0 10px 20px red;  
44     }  
45     .box-shadow-8{  
46         box-shadow:0 0 10px 20px red,  
47         0 0 10px 5px black;  
48     }  
49     .box-shadow-9{  
50         box-shadow: 0 0 0 1px red;  
51     }  

text-shadow: 文字阴影

水平阴影、垂直阴影、模糊距离,以及阴影的颜色

举例点连接 https://www.cnblogs.com/wuchuanlong/p/5985350.html

猜你喜欢

转载自blog.csdn.net/o_jj_o/article/details/85857461