通过切口边框设计,我们可以向用户展示可以在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/