通过切口边框设计，我们可以向用户展示可以在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;}}
翻译自: /blog/css-cutout-border/
