### 1. 文字阴影 & 多行文字阴影:text-shadow
1. text-shadow: 0px 1px #fff,4px 4px 0px #dad7d7;
### 2. 盒阴影 & 内阴影 & 多重阴影:box-shadow
1. box-shadow: inset 0 0 30px hsl(0, 0%, 0%), inset 0 0 70px hsla(0, 97%, 53%, 1);
### 3. 背景线性渐变 & 径向渐变 & 重复渐变
1. background: linear-gradient(45deg, red, blue);
2. background: radial-gradient(12rem circle at bottom, yellow, orange, red);
3. background: repeating-radial-gradient(black 0px, orange 5px, red ,10px);
```
.multiple {
margin: 1rem;
width: 400px;
height: 200px;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
}
```
![](https://box.kancloud.cn/1843bf96f90765eb49da74eaf1fb3bc4_401x200.png)
### 4. 背景大小:background-size
1. auto :让图片保持其原生大小。
2. cover :保持图片比例,拓展至覆盖整个元素。
3. contain :保持图片比例,拓展图片让其最长边保持在元素内部。
### 5. 滤镜 & 多滤镜:filter
1. filter: opacity(10%) blur(2px) sepia(35%);