阴影边框 CSS - HTML

CSS 中有多种方式可以给 HTML 元素添加边框，而阴影边框可以使你的 UI 更具现代感和深度。在本文中，我们将讨论如何使用 CSS 在 HTML 元素上创建阴影边框，并提供几个示例。

CSS 属性

以下是创建阴影边框所需的 CSS 属性：

• box-shadow: 定义元素周围的阴影效果。
• border-radius: 定义边框的圆角。
• border: 定义元素的边框。

创建一个简单的阴影边框

以下代码演示如何为 HTML div 元素创建一个简单的阴影边框：

div {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   border-radius: 5px;
   border: 1px solid #e6e6e6;
}

我们使用 box-shadow 属性来添加阴影效果，并使用 border-radius 属性来定义圆角。最后，我们使用 border 属性定义边框。

高级阴影边框

下面是一个更复杂的例子，其中添加了更丰富的阴影效果：

div {
   box-shadow: 
      /*
      offset-x | offset-y | blur-radius | spread-radius | color 
      */
      2px 2px 4px 0 rgba(0, 0, 0, 0.1),
      4px 4px 10px 0 rgba(0, 0, 0, 0.1),
      -2px -2px 4px 0 rgba(0, 0, 0, 0.1),
      -4px -4px 10px 0 rgba(0, 0, 0, 0.1);
   border-radius: 10px;
   border: 2px solid white;
   background-color: #f6f6f6;
}

我们使用 box-shadow 属性分别在元素的四个方向添加了四个阴影效果，每个效果都使用了偏移量，模糊半径和扩散半径，并且所有效果都是通过相同的颜色添加的。

结论

阴影边框是一种很流行的设计趋势，可以使你的 UI 具有现代感和深度。本文介绍了如何使用 CSS 来创建阴影边框，并提供了一些示例代码。希望这篇文章能够帮助你创建出更具创意和惊艳的设计。