[分享]css3投影效果图

CSS3投影效果是现代Web设计中非常方便的功能，可以让页面元素出现更加立体，实现更好的视觉效果。

.example {
   box-shadow: 0 4px 8px rgba(0,0,0,0.4); 
} 

上述代码表示对class为example的HTML元素添加了一个投影效果，投影的颜色为黑色，透明度为0.4。其中，第一个参数表示投影距离元素左侧的距离，第二个参数表示距离元素顶部的距离，第三个参数表示投影模糊程度，最后一个参数表示投影颜色。

投影效果并不仅限于黑色，还可以使用其他颜色或渐变效果。以下是一个示例代码：

.example2 {
   box-shadow: 0 0 10px #777, inset 0 0 10px rgba(0,0,0,0.1); 
} 

在上述代码中，box-shadow属性由两个值组成，逗号分隔。第一组表示投影效果，颜色为#777，模糊程度为10px。第二组使用了inset属性，表示为元素添加一个内阴影效果，颜色为透明黑色，模糊程度为10px。

投影效果可以应用于各种HTML元素，如div、按钮、图片等。使用CSS3投影效果能够大大提高页面的美观度和交互性。