如何制作平滑的CSS3 BOX-SHADOW盒子阴影动画效果

html-css06

如何制作平滑的CSS3 BOX-SHADOW盒子阴影动画效果,第1张

box-shadow:inset x-offset y-offset blur-radius spread-radius color

(投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色)

box-shadow:6px 6px 6px #292929对应的值

inset———默认的情况下是外阴影,如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影

直接使用box-shadow:5px 5px 10px black inset属性设置样式样式就可以了。

前两个值(5px 5px)是水平和垂直方向的偏移量,正值阴影就会向左向下偏移,负值反之;

第三个值(10px)是设置模糊距离;

black就是阴影的颜色啦;

最后一个inset是在元素内部创建一个阴影,也就是内阴影了;

删除掉inset就是设置外阴影了