[分享]css3投影代码

CSS3投影效果是一个非常常用的特效，通过给元素添加投影效果，让其看上去更立体，更有质感。下面我们来介绍如何使用CSS3代码实现各种不同的投影效果。boxshadow: hshadow vshadow...

CSS3投影效果是一个非常常用的特效，通过给元素添加投影效果，让其看上去更立体，更有质感。下面我们来介绍如何使用CSS3代码实现各种不同的投影效果。

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

上面是CSS3的box-shadow属性，其中各参数代表的意义如下：

• h-shadow：水平方向的阴影偏移量，可正可负数
• v-shadow：垂直方向的阴影偏移量，可正可负数
• blur：阴影的模糊程度，数值越大，阴影越模糊
• spread：阴影的扩散程度，数值越大，阴影越扩散
• color：阴影的颜色
• inset：可选参数，表示内阴影，默认为外阴影

.box-shadow1 {
  box-shadow: 5px 5px 5px #000;
} 

上述代码定义了一个简单的阴影效果，水平和垂直方向的偏移量均为5px，模糊程度为5px，颜色为黑色。

.box-shadow2 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 

上述代码定义了一个稍微复杂一些的阴影效果，有两个阴影叠在一起，第一个阴影的扩散程度为8px，第二个阴影的扩散程度为20px。

.text-shadow {
  text-shadow: 2px 2px #000;
} 

上述代码定义了一个文字阴影效果，对于文字来说，添加阴影效果让其更加突出。