[分享]css3投影上右下

CSS3中提供了一种投影效果，称为“boxshadow”，可以为元素添加投影来提升视觉的层次感和立体感，增强页面的美观度。boxshadow有四个参数，分别为：水平方向的位移、垂直方向的位移、模糊半径...

CSS3中提供了一种投影效果，称为“box-shadow”，可以为元素添加投影来提升视觉的层次感和立体感，增强页面的美观度。

box-shadow有四个参数，分别为：水平方向的位移、垂直方向的位移、模糊半径和扩展半径。其中，水平和垂直方向的位移必须要设置，而模糊半径和扩展半径可选。

/* 语法 */
box-shadow: h-shadow v-shadow blur spread color;

/* 示例 */
box-shadow: 10px 10px 5px 2px rgba(0, 0, 0, 0.3); 

当想要向上、向右、向下三个方向同时添加投影时，可以使用“inset”关键字来控制投影的方向。而只需要添加“inset”关键字到box-shadow之后即可实现上右下三个方向的投影效果。

/* 向上投影 */
box-shadow: 0px -10px 10px -10px rgba(0, 0, 0, 0.2) inset;
/* 向右投影 */
box-shadow: 10px 0px 10px -10px rgba(0, 0, 0, 0.2) inset;
/* 向下投影 */
box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2) inset; 

值得注意的是，扩展半径需设置成负值。因为如果设置成正值，那么元素周围包含阴影区域也会发生扩张，导致阴影区域变大，产生不必要的影响。

总之，box-shadow是一种优秀的css3投影效果，可以帮助我们实现各种炫酷的效果，为网页设计提供无限可能。