CSS —— 盒子阴影（box-shadow）

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

注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。

未加阴影效果如下：

1、外阴影
a、给元素右边框和下边框加外阴影——把水平阴影位置、垂直阴影位置偏移值均设为正值

css代码

/* 阴影向右偏移10px、向下偏移10px、模糊距离为20px、阴影尺寸为10px、颜色为pink*/
box-shadow: 10px 10px 20px 10px pink; 

css代码

/* 模糊距离为1px */
box-shadow: 10px 10px 1px 10px pink; 

css代码

/* 阴影尺寸为1px */
box-shadow: 10px 10px 20px 1px pink; 

b、给元素左边框和上边框加外阴影——把水平阴影位置、垂直阴影位置偏移值均设为负值

css代码

/* 阴影向左偏移10px、向上偏移10px、模糊距离为20px、阴影尺寸为10px、颜色为pink */
box-shadow: -10px -10px 20px 10px pink; 

2、内阴影（inset）
a、给元素左边框和上边框加内阴影——把水平阴影位置、垂直阴影位置偏移值均设为正值

css代码

/* 使用关键字 inset 设置内阴影 */
box-shadow: 10px 10px 20px 1px pink inset;

b、给元素右边框和下边框设置内阴影——把水平阴影位置、垂直阴影位置偏移值均设为负值

css代码

box-shadow: -10px -10px 20px 1px pink inset;

3、实际应用
给div加外阴影实现雨后彩虹

html代码

css代码

.box-shadow-test {
  height: 100px;
  width: 100px;
  margin: 100px auto;
  transform: rotate(45deg);
  border-radius: 100px 0 0 0;
  box-shadow:
  /*参数依次为：颜色、水平阴影位置、垂直阴影位置、模糊距离、阴影大小*/
     #f44336 -2px -2px 0 1px, 
     #ff9800 -4px -4px 0 3px,
     #ffeb3b -6px -6px 0 5px, 
     #8bc34a -8px -8px 0 7px, 
     #00bcd4 -10px -10px 0 9px,
     #2196f3 -12px -12px 0 11px,
     #9c27b0 -14px -14px 0 13px; 
}

彩虹来啦，，，