[分享]css十大阴影技巧

随着互联网技术的发展，很多网站的设计变得越来越精美，其中，阴影效果的运用成为了设计师们最常使用的技巧之一。而本文将会介绍css中最常用的十种阴影技巧。1. 普通阴影boxshadow: 2px 2px...

随着互联网技术的发展，很多网站的设计变得越来越精美，其中，阴影效果的运用成为了设计师们最常使用的技巧之一。而本文将会介绍css中最常用的十种阴影技巧。

1. 普通阴影

box-shadow: 2px 2px 2px #333; 

2. 双倍阴影

box-shadow: 7px 7px 0px #333, 12px 12px 0px #777; 

3. 浮动阴影

box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); 

4. 内侧阴影

box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3); 

5. 相对位置阴影

box-shadow: 0 4px white, 4px 0 white, 0 -4px white, -4px 0 white; 

6. 文字阴影

text-shadow: 2px 2px 2px #333; 

7. 过渡阴影

box-shadow: 0 25px 25px -15px rgba(0,0,0,.3) inset; 

8. 内浮动阴影

box-shadow: inset 0 20px 20px rgba(0,0,0,0.2); 

9. 泪滴阴影

box-shadow: 0 5px 25px rgba(0,0,0,0.2), 0 10px 10px rgba(0,0,0,0.2) inset; 

10. 凸出阴影

box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 0 5px #fff inset, 0 0 0 7px #333 inset; 

以上就是css中最常用的十种阴影技巧。希望大家可以在网站设计中灵活运用，打造出更加精美的作品。