CSS的内阴影是可以用来实现一些简洁美观的效果的,下面我们来看一下如何实现。
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
以上代码是实现内阴影的最基本方式,其中inset指定阴影为内阴影,0 0分别是x轴和y轴的偏移量,10px是阴影的模糊半径,rgba(0, 0, 0, 0.5)是阴影的颜色值和透明度。
如果需要实现多重内阴影,只需要在上述代码后面继续添加阴影参数即可。
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 5px rgba(255, 255, 255, 0.5);
上述代码中,我们通过逗号分隔了两个内阴影的参数,实现了多重内阴影。
如果需要实现只有某一侧有内阴影的效果,可以指定不同的偏移量,如下:
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), inset -5px 0 5px rgba(0, 0, 0, 0.5);
这里我们通过将x轴的偏移量设置负数,让阴影出现在元素的左侧。