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