box-shadow的用法

2024年1月31日发(作者：)

box-shadow的用法

Box-shadow是CSS样式属性中的一种，可用于在元素周围创建阴影效果。此效果可用于增强页面元素的视觉效果和深度感。以下是box-shadow属性的语法和用法：

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

参数说明：

h-shadow：必需。水平阴影的位置，可以为负值。

v-shadow：必需。垂直阴影的位置，可以为负值。

blur：可选。模糊距离。

spread：可选。阴影的大小/扩散程度。

color：可选。阴影颜色。

inset：可选。将阴影从元素内部变为元素外部。

示例：

box-shadow: 2px 2px 8px #888888;

此示例创建了一个2px水平和2px垂直的阴影，模糊距离为8px，颜色为#888888。阴影大小没有指定，因此使用默认值。

box-shadow: 0 0 10px 5px #888888 inset;

此示例创建了一个从元素内部向外的阴影，水平和垂直偏移量为0，模糊距离为10px，大小/扩散程度为5px，颜色为#888888。