CSS 盒子阴影（既内部又外部）在同一个元素上的应用

在本文中，我们将介绍如何使用CSS为同一个元素应用既有内部阴影又有外部阴影的效果。盒子阴影是一种常见的CSS样式，可以为元素增加立体感和层次感。通过使用box-shadow属性，我们可以在一个元素上同时应用内部和外部阴影。

阅读更多：CSS 教程

实现方式

要同时应用盒子的内部和外部阴影，我们需要使用box-shadow属性来实现。box-shadow属性可以接受多个参数，用逗号分隔。

示例代码如下所示：

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
}

在上述示例代码中，我们定义了一个名为.box的类，它的宽度和高度分别为200像素，并设置了一个浅灰色的背景色。此外，我们还为这个元素添加了1像素的边框。接下来，我们使用box-shadow属性来同时应用内部和外部阴影。第一个阴影参数inset 0 0 10px rgba(0, 0, 0, 0.5)表示一个内部阴影，其偏移量为0，模糊半径为10像素，颜色为半透明的黑色。第二个阴影参数0 0 10px rgba(0, 0, 0, 0.5)表示一个外部阴影，其偏移量为0，模糊半径为10像素，颜色同样为半透明的黑色。

此时，.box元素将同时具有内部和外部阴影效果。

属性解析

在上述示例代码中，我们介绍了两个box-shadow属性的参数。下面对box-shadow属性的各个参数进行详细解析：

inset：该参数用于指定阴影是内部阴影还是外部阴影。当设置为inset时，表示内部阴影；否则为外部阴影。
x和y：这两个参数用于设置阴影的偏移量。x参数用于设置阴影水平方向上的偏移量（正值向右偏移，负值向左偏移），y参数用于设置阴影垂直方向上的偏移量（正值向下偏移，负值向上偏移）。
blur：该参数用于设置阴影的模糊半径。较大的值将产生更模糊的阴影效果，较小的值将产生更清晰的阴影效果。
spread：该参数用于设置阴影的大小。正值将使阴影扩张，负值将使阴影收缩。
color：该参数用于设置阴影的颜色。可以使用颜色值、RGB值、RGBA值、HSL值、HSLA值等。

示例说明

下面我们将介绍一些常见的例子，来说明如何在同一个元素上同时应用内部和外部阴影效果。

示例1：按钮样式

.button {
  width: 100px;
  height: 40px;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
}

在上述示例中，我们定义了一个名为.button的类，其样式代表一个蓝色的按钮。我们使用了inset参数来设置按钮的内部阴影，同时使用了外部阴影来增加按钮的立体感。

示例2：卡片效果

.card {
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5);
}

在上述示例中，我们定义了一个名为.card的类，它代表一个卡片样式。我们使用了inset参数来设置卡片的内部阴影，同时使用了外部阴影来增加卡片的立体感。