[分享]css内阴影和外阴影一起

CSS中有许多强大的样式属性，其中包括内阴影和外阴影。内阴影和外阴影可以在元素内部和外部添加深度、质感和维度。使用这些属性可以轻松地增强网站设计的外观。在这篇文章中我们将学习如何同时使用内阴影和外阴影...

CSS中有许多强大的样式属性，其中包括内阴影和外阴影。内阴影和外阴影可以在元素内部和外部添加深度、质感和维度。使用这些属性可以轻松地增强网站设计的外观。在这篇文章中我们将学习如何同时使用内阴影和外阴影。

.box {
  width: 200px;
  height: 200px;
  background: #F7CA18;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.3);
} 

在上述代码中，我们创建了一个宽度和高度都是200像素的盒子，背景颜色为#F7CA18。接下来我们添加了一个内阴影和一个外阴影。

内阴影使用属性inset，表示阴影位于元素内部，而外阴影则不需要指定方向，默认是从元素外部向内扩散。

接下来，我们分别解释一下每个阴影属性的含义：

• 水平偏移量表示阴影沿X轴的偏移距离。可正可负。

• 垂直偏移量表示阴影沿Y轴的偏移距离。可正可负。

• 模糊值表示阴影的模糊程度。默认为0，表示不增加模糊。值越大，阴影轮廓越模糊，看起来也更柔和。

• 扩散值表示阴影的扩散程度。默认为0，表示完全不扩散。值越大，阴影就越大，从而增加元素的深度和重量感。

• 颜色值表示阴影的颜色。你可以使用任何有效的CSS颜色参数，例如RGB、HEX或颜色名称。

使用内阴影和外阴影的效果很酷，可以让你的元素看起来立体感更强，并增加深度。在设计网站时，这些属性可以是非常有用的。现在你也可以在你的网站上实现类似的效果了。