.box{ box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5); }
上述代码中,.box表示需要添加内阴影效果的元素的类名,box-shadow是内阴影参数,其中inset表示内阴影效果,5px和5px分别表示内阴影的X方向偏移和Y方向偏移,10px表示内阴影的模糊程度,rgba(0,0,0,0.5)表示内阴影的颜色为半透明的黑色。
除了以上参数之外,CSS内阴影参数还有许多其他可以配置的属性,例如:
1、spread表示内阴影的扩展距离;
2、color表示内阴影的颜色;
3、多个阴影效果可以通过逗号隔开等等。
.box{ box-shadow: inset 5px 5px 10px rgba(0,0,0,0.5), inset -5px -5px 10px rgba(255,255,255,0.5); }
该代码为.box元素添加了两个内阴影效果,一个是黑色的阴影,一个是白色的阴影,通过这种方式可以制作出更加丰富炫酷的阴影效果。
CSS内阴影参数适用于各种元素,无论是文本、图片还是按钮等元素,都可以通过CSS内阴影参数实现内阴影效果。