css div 内陷

CSS内陷（CSS Box Shadow）是一种常用的样式技巧，通过为元素添加内阴影效果来实现。内阴影也可以用于实现立体感和视觉层次，增加元素的美观程度。在本文中，我们将详细解释CSS内陷的原理，并给出几个案例来说明如何使用。
第一个案例是一个简单的div元素内部添加内阴影效果。我们可以通过设置box-shadow属性来实现这个效果。下面是一个示例代码：

<style>.box {width: 200px;height: 200px;background-color: #f5f5f5;box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);}</style><br><div ></div>

在上面的代码中，我们给div元素添加了一个class为"box"的样式。通过设置box-shadow属性，我们可以将一个内阴影效果应用于div元素。其中，inset关键字用于告诉浏览器该阴影是内阴影，而不是外阴影。接下来的三个值分别是水平偏移、垂直偏移和模糊半径，通过调整这些值，我们可以实现不同的效果。
第二个案例是一个按钮样式，当鼠标悬停在按钮上时，会出现内陷的效果。这种效果可以通过使用CSS伪类:hover来实现。下面是一个示例代码：

<style>.button {display: inline-block;padding: 10px 20px;background-color: #ff5252;color: #fff;text-decoration: none;transition: box-shadow .3s;}<br>    .button:hover {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);}</style><br><a href="" >按钮</a>

在上面的代码中，我们为按钮添加了一个class为"button"的样式。通过设置:hover伪类，我们可以在鼠标悬停时为按钮添加内阴影效果。同时，我们还为按钮添加了一个过渡效果，使内阴影的出现和消失更加平滑。
最后一个案例是一个卡片效果，通过使用CSS内陷和圆角效果，可以将普通的方形div元素变成一个漂亮的卡片。下面是一个示例代码：

<style>.card {width: 300px;height: 200px;background-color: #f5f5f5;border-radius: 10px;box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);}</style><br><div ></div>

在上面的代码中，我们通过为卡片div元素添加一个border-radius属性，使其拥有圆角效果。同时，我们还为卡片添加了box-shadow属性，实现了内陷的效果。通过调整这些样式属性，我们可以创建出不同形状和风格的卡片效果。
一下，CSS内陷是一种常用的样式技巧，通过为元素添加内阴影效果来实现。通过设置box-shadow属性，我们可以很方便地为元素添加内阴影效果，并通过调整属性值实现不同的效果。内陷效果可以用于添加立体感和视觉层次，提升元素的美观程度。通过本文给出的案例，希望能够帮助读者更好地理解和运用CSS内陷。

上一篇：c div位置

下一篇：css div 宽

---