Box-Shadow - CSS 🎨

Box-shadow 是一个非常实用的CSS属性，它能够为网页上的元素添加阴影效果，从而增强视觉效果和层次感。通过使用这个属性，你可以轻松地给任何HTML元素添加阴影，使其看起来更立体，更有吸引力。

如何使用 Box-Shadow？

基本语法如下：

```css

.box {

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

}

```

- h-offset：水平偏移量。

- v-offset：垂直偏移量。

- blur：模糊半径。

- spread：阴影的扩展半径。

- color：阴影的颜色。

例如：

```css

.box {

box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);

}

```

这将为`.box`类应用一个水平和垂直偏移量为5px，模糊半径为10px，扩展半径为0，颜色为半透明黑色的阴影。

实战案例

假设你正在设计一个网站的按钮，希望它看起来更有立体感。通过添加适当的box-shadow，可以让按钮看起来像是浮在页面上。这不仅提升了用户体验，也增加了设计的美观度。

使用box-shadow可以让你的设计更加生动有趣，快来尝试吧！🎨

免责声明：本文由用户上传，如有侵权请联系删除！