/*语法规则*/ box-shadow: h-shadow v-shadow blur spread color inset; /*参数解释*/ h-shadow:必须,水平偏移量,可为负值,如 -5px; v-shadow:必须,垂直偏移量,可为负值,如 -5px; blur:可选,模糊半径,值越大,模糊半径越大,投影效果越模糊; spread:可选,阴影扩张半径,值越大,阴影扩张半径越大; color:可选,投影颜色,默认为黑色; inset:可选,指定是否为内阴影,如为inset,则投影在元素内部。
例如,大家可以给一个按钮添加一个向后投影效果:
.btn{ box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.3); }
上述代码中,按钮的投影效果为:无水平、垂直偏移,模糊半径为5px,阴影扩张半径为2px,颜色为rgba(0,0,0,0.3)(即黑色半透明),并且位于按钮的后面,产生向后投影的效果。