box-shadow 彻底搞懂 css 阴影

基本属性

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow 必需的。水平阴影的位置。允许负值
• v-shadow 必需的。垂直阴影的位置。允许负值
• blur 可选。模糊距离
• spread 可选。阴影的大小
• color 可选。阴影的颜色。
• inset 可选。从外层的阴影（开始时）改变阴影内侧阴影

只有一条数据的情况下
改变第一个参数

box-shadow: -20px 0 10px 0 red;

为负数时往左偏移

1589428661(1).jpg

box-shadow: 20px 0 10px 0 red;

为正数时往右偏移

1589434861(1).jpg

改变第二个参数

box-shadow: 0px -20px 10px 0 red;

为负数时往上偏移

1589435089(1).jpg

box-shadow: 0px 20px 10px 0 red;

为正数时往下偏移

1589435192(1).jpg

往四周 只设置第三个参数即可

box-shadow:0 0 30px 0 red;

1589435249(1).jpg

设置第三和第四个参数

box-shadow: 0 0 30px 20px red;

1589435346(1).jpg

只设置第四个参数 相当于设置了个边框 就不放图了

box-shadow: 0 0 0 20px red;

设置两条数据:
不设置 inset 情况下两种颜色叠加

box-shadow: 0px 0px 10px 5px red, 0px 0px 10px 3px blue;

1589435535(1).jpg

给第一条加上 inset

box-shadow: 0px 0px 10px 5px red inset, 0px 0px 10px 3px blue;

红色内阴影 蓝色外阴影
因为是给图片的父布局设置的阴影所以内阴影去掉图片才看的到

1589435695(1).jpg

设置三条数据也会发生颜色重合 不放图了

也可以用过改变偏移方向 达到设置多条边

box-shadow: 0px -10px 10px 0px #ff0000, 10px 0px 10px 0px #2279ee,
  0px 10px 10px 0px #eede15;

1589436967(1).jpg

设置四条数据

box-shadow: 0px -10px 10px 0px #ff0000,/*上边阴影  红色*/ 
-10px 0px 10px 0px #3bee17,/*左边阴影  绿色*/ 
10px 0px 10px 0px #2279ee,/*右边阴影  蓝色*/
0px 10px 10px 0px #eede15; /*下边阴影  黄色*/

按顺序对应上，左，右，下

1589436129(1).jpg

给其中一项加上 inset

1589436237(1).jpg

设置多个 inset 会有更好玩的效果。

box-shadow属性分析
box-shadow属性解析