合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
### 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%);