css文字加边框镂空文字_如何使用CSS创建镂空边框设计

通过切口边框设计，我们可以向用户展示可以在HTML元素的边框区域下找到的内容 。 通常通过将两个或两个以上 大小不同的 块元素 （在大多数情况下为div） 堆叠在一起来解决此任务。 首先，这似乎是一种轻松的解决方案，但是当您要多次重用布局，在元素周围移动，优化移动设计或维护代码时，它会变得更加令人沮丧。

在本文中，我将向您展示一个优雅的纯CSS解决方案，该解决方案仅使用一个HTML元素即可达到相同的效果。 此技术对于可访问性也非常有用，因为它将背景图片加载到CSS中 ，与HTML分开。

在这篇文章的结尾，您将知道如何在边框区域显示背景图像，以创建可以在下面看到的剪裁边框设计 。 我还将展示如何使用视口单元使设计具有响应能力。

初始码

HTML前面的唯一要求是一个block元素 ：

<div class="cb"></div>

我们需要重用 div的尺寸（宽度和高度）和边框宽度值，因此我将它们作为CSS变量引入。 变量--w表示的宽度 .cb块元素， --h表明它的高度 ， --b无二的边框宽度 ，并--b2的宽度乘以2，我们将在后面看到使用边界最后一个变量。

我正在相对于视口的宽度调整<div>大小，因此使用了vw单位（如果需要，可以使用固定单位）。

.cb {
  --w: 35vw;
  --h: 40vw;
  --b: 4vw;
  --b2: calc(var(--b) * 2);
}

快速的解释-

所述单元vw表示^1/100视口的宽度的 。 例如， 50vw是垂直切成100等份的视口宽度的50份，而50vh是水平切成100等份的视口高度的50 份 。

让我们通过添加背景并使用预定义CSS变量设置边框，高度和宽度来改进上述代码。

.cb {
  --w: 35vw;
  --h: 40v