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: 40vw;--b: 4vw;--b2: calc(var(--b) * 2);background: url(bg.jpg);border: var(--b) solid transparent;height: var(--h);width: var(--w);
}

演示现在应该是这样的：

调整背景图片的大小

我们需要背景图像覆盖<div>的整个区域，包括边界区域 ，因此需要相应调整背景图像的大小。

如果要给背景图像提供固定的大小，只需确保您提供的大小使它也能覆盖<div>的边框区域。至于到目前为止所使用的代码，这是我给它的background值：

.cb {--w: 35vw;--h: 40vw;--b: 4vw;--b2: calc(var(--b) * 2);background: url(bg.jpg) center/calc(var(--w) + var(--b2))calc(var(--h) + var(--b2));border: var(--b) solid transparent;height: var(--h);width: var(--w);
}

同样， 背景图片的高度 [ calc(var(--h) + var(--b2)) ]是div [ var(--h) ]的高度与顶部和顶部的宽度之和。底边框 [ var(--b2) ]。

这样，我们将背景图像的大小调整为与div大小相同的区域（包括边界区域） 。

这就是我们现在所拥有的：

覆盖边界专属区域

现在，我们已经用背景图像覆盖了包含边界的区域，剩下的就是用纯色覆盖边界内部的中心区域 （不含边界的区域），为此我们得到了box-shadow插图 。

.cb {--w: 35vw;--h: 40vw;--b: 4vw;--b2: calc(var(--b) * 2);background: url(bg.jpg) center/calc(var(--w) + var(--b2))calc(var(--h) + var(--b2));border: var(--b) solid transparent;box-shadow: inset var(--w) 0 0 rgba(0,120,237,.5);height: var(--h);width: var(--w);
}

值为var(--w)的水平阴影覆盖div的整个宽度 。使用rgba颜色功能可以在混合中添加一些透明度 ，但是如果您想完全覆盖中心区域，也可以使用不透明的颜色。

使用

在Codepen演示中，您可以在图像周围看到白色边框。 使用框阴影创建多个边框有一个著名的技巧-我们可以使用相同的技术在设计中添加一个或多个纯色边框 。

更新的box-shadow值是：

.cb {
--w: 35vw;
--h: 40vw;
--b: 4vw;
--b2: calc(var(--b) * 2);
background: url(bg.jpg) center/calc(var(--w) + var(--b2))calc(var(--h) + var(--b2));
border: var(--b) solid transparent;
box-shadow: inset var(--w) 0 0 rgba(0,120,237,.5),0 0 0 calc(var(--b) / 2) white;
height: var(--h);
width: var(--w);
}

可选：单独的布局和美观

在我的最终Codepen演示中，我将背景图像和框阴影颜色的代码放置在单独的类中 。这是可选的 ，但是如果要在多个元素中重复使用剪切边框设计的布局 ，并分别为每个元素添加美观效果（背景图像+颜色），则该功能非常有用。

我向<div>添加了一个名为.poster1的类以实现此目标。

.poster1 {--tbgc: rgba(0,120,237,.5);background-image: url("http://bit.ly/2eQBij2");
}

由于background是速记属性， 因此可以单独覆盖/设置其速记属性。因此，我们可以在.poster1设置background-image ，并从.cb的background属性中删除url值。

要设置box-shadow的值，我们可以使用另一个CSS变量 。 --tbgc变量保存我们要赋予框阴影的颜色值 （演示中的.cb ），因此在.cb的样式规则中，我们用var(--tbgc)替换了box-shadow属性的颜色值var(--tbgc) 。

.cb {--w: 35vw;--h: 40vw;--b: 4vw;--b2: calc(var(--b) * 2);background: center/calc(var(--w) + var(--b2))calc(var(--h) + var(--b2));border: var(--b) solid transparent;box-shadow: inset var(--w) 0 0 var(--tbgc),0 0 0 calc(var(--b) / 2) white;height: var(--h);width: var(--w);
}

纵向模式代码

由于尺寸全部以vw为单位，因此当您以纵向模式查看设计时，它看起来太小 （宽度相对于高度较小），默认情况下所有移动设备都处于该状态。要解决此问题，请使用vh切换vw ，并根据您认为适合纵向模式的方式调整设计大小 。

@media (orientation: portrait) {.cb {--w: 35vh;--h: 40vh;--b: 4vh;}
}

翻译自: https://www.hongkiat.com/blog/css-cutout-border/