[分享]css中实现阴影的有什么

CSS中实现阴影可以让页面看起来更加立体、美观。下面我们来看看CSS中如何实现阴影效果。boxshadow: 水平阴影 垂直阴影 模糊半径 阴影大小 阴影颜色 内/外阴影; 例如：boxshadow:...

CSS中实现阴影可以让页面看起来更加立体、美观。下面我们来看看CSS中如何实现阴影效果。

box-shadow: 水平阴影 垂直阴影 模糊半径 阴影大小 阴影颜色 内/外阴影;

例如：box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3) inset;

说明：水平阴影为2px，垂直阴影为2px，模糊半径为2px，阴影大小为1px，阴影颜色为rgba(0,0,0,0.3)，内阴影效果。

详细解释：
水平阴影：指阴影在x轴上的偏移量，可以为正数、负数、0。
垂直阴影：指阴影在y轴上的偏移量，可以为正数、负数、0。
模糊半径：即阴影的渐变程度，数值越大，渐变越平滑（即越模糊）。
阴影大小：即阴影的扩散程度，可以使阴影比元素更大或者更小。
阴影颜色：可以使用十六进制颜色、rgb颜色、rgba颜色。
内/外阴影：box-shadow默认外阴影效果，如果需要内阴影效果，则需要添加inset关键字。 

使用这些属性可以实现出很多不同的阴影风格，比如实现出类似磨砂玻璃的效果：

box-shadow: 0 0 20px rgba(0,0,0,0.5) inset; 

还可以实现出类似凸起或者凹陷的效果：

/*凸起效果*/
box-shadow: 0 5px 10px rgba(0,0,0,0.3),0 0 5px rgba(0,0,0,0.5) inset;
/*凹陷效果*/
box-shadow: 0 5px 10px rgba(0,0,0,0.3),0 0 5px rgba(255,255,255,0.4) inset; 

总之，使用CSS中的阴影属性可以让页面元素更加生动、美观。但是需要注意的是，过多的阴影效果会降低页面的性能，在实际应用中需要根据具体情况来使用。