不同深度的 CSS 插入边框

Posted on by

有时在创建插入边框时，我们希望将它们设置在距元素边缘不同的距离处。在 CSS 中，有很多方法可以做到这一点，根据您所处的情况，这些方法都很有用。

让我们看看使用 CSS 创建嵌入边框的不同方法。

选项 1：使用嵌入边框#

border使用以下属性在 CSS 中制作插入边框的最简单方法：

button {
    border: 2px inset rgba(255,255,255,0.5);
}

选项 2：使用轮廓#

如果这不起作用，我们也可以使用轮廓。我们还可以为轮廓设置偏移量，使其在元素内开始。这很容易做到——它只需要两行代码：

button {
    outline: 1px solid rgba(255,255,255,0.5);
    outline-offset: -6px;
}

Positives/Negatives正面/负面

  • 支持圆角！
  • 易于实施。
  • 干扰可用性 – 理想情况下应该使用哪个轮廓。

选项 3：伪元素#

在某些情况下，完成这项工作的最简单方法– 伪元素看起来有点像这样：

button {
    position: relative;
}
button:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 100px;
    width: calc(100% - 13px);
    height: calc(100% - 13px);
    z-index: 999;
}

这是如何工作的

  • 首先，伪元素是由 CSS 制作的“假”元素，可以在任何 HTML 标记中创建。有两个 –:before和:after– 所以任何 HTML 元素都可以有两个伪元素。
  • 上面，我们在每个按钮元素中创建了一个。它的位置是absolute，所以它位于按钮的顶部，而不是在其中。它根据按钮的位置移动，因为按钮的位置设置为relative。然后我们将其放置在距离按钮顶部和左侧 6px 的位置。
  • 接下来，我们给它一个边框和一个边框半径，使它有弯曲的边缘。我们将元素的宽度和高度设置为元素的宽度或高度减去我们移动它的距离（考虑到我们将它“插入”了 12 像素，因为我们将它向左移动了 6 像素），然后添加边框宽度，所以 (6px + 6px + 1px)
  • 最后，我们设置z-index – 元素的垂直顺序，因此伪元素位于按钮顶部，为我们提供了漂亮的轮廓。

Positives/Negatives正面/负面

  • 用完你两个珍贵的伪元素之一☹️
  • 是一个独立的元素，所以我们可以按照我们认为合适的方式来设计它！
  • 支持圆角！

选项 4：Box-shadow 嵌入边框#

在某些情况下，我们可以使用 box-shadow，而不是使用伪元素：

button {
    box-shadow: inset 0 0 0 5px #e94d71, inset 0 0 0 6px rgb(255 255 255 / 50%);
}

在上面的例子中，我们放置了一个 inset box shadow，它多 inset 1px，这是我们的边框颜色。最重要的是，我们放置了另一个盒子阴影，它是原始按钮的颜色。这给出了嵌入边框的错觉。

Positives/Negatives正面/负面

  • 仅适用于纯色/非动画表面。
  • 不使用伪元素
  • 支持圆角！
  • 不影响其他 CSS – 如果需要，您仍然可以添加更多框阴影层。

推荐阅读：