扩展“box-shadow”和“border-radius”的使用

2025-06-04

扩展“box-shadow”和“border-radius”的使用

这是系列文章的第十四篇，该系列文章探讨了过去 13 多年来我作为前端开发者所遇到的各种问题，并提出了相应的解决方案。访问ModernCSS.dev可以查看整个系列文章及其他资源。

box-shadow本集将探讨和的扩展用途，border-radius并以使用这些属性来增强图像呈现的登陆页面演示作为结束。

您将学习：

  • 的扩展语法border-radius，以及何时使用哪种类型的单位来设置值
  • 如何创建box-shadow多层
  • 关于box-shadow价值inset
  • 如何“破解”box-shadow流行inset的图像过滤技术

概述border-radius

现在的孩子永远不必为想要显示为圆角的 div 的每个角创建 gif 😂 确实，的发布和最终支持border-radius是 CSS 中最重要的里程碑之一。

为了复习一下，下面是它的常用用法：

border-radius: 50%;
Enter fullscreen mode Exit fullscreen mode

对于方形元素来说，这将导致圆形的外观。

或者将其缩小到略微圆润的程度，使其变成尖锐的方角，例如对于您可能使用的按钮或卡片：

border-radius: 8px;
Enter fullscreen mode Exit fullscreen mode

进一步实现这一点的一种方法是使用两个值，其中第一个值设置左上角和右下角，第二个值设置右上角和左下角：

border-radius: 20% 50%;
Enter fullscreen mode Exit fullscreen mode

哪个...看起来有点像柠檬？

双值 border-radius 示例

现在，给定相同的值但不同大小的 div，结果将有很大差异：

不同尺寸的 div 适用相同的 border-radius 值

我们还可以设置所有四个角：

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 3vw 4vw 8vw 2vw;
Enter fullscreen mode Exit fullscreen mode

四个角都设置 border-radius 的示例

但请稍等——还有更多！

有一个超级扩展的语法，可以让你同时定义每个角的水平和垂直半径。默认的圆角非常圆，而添加额外的半径会改变产生角的“剪切”，从而产生流行的“斑点”形状：

具有边框半径扩展语法的“blob”形状

查看 Jhey 的这个border-radius 游乐场，它具有配置面板和实时预览，可以生成扩展的语法border-radius样式。

还有几种定义语法的方法，您可以在MDN 文档中查看。

单位border-radius

请注意，我们使用了几个不同的单位：%、px和，vw其中“视口宽度”视口单位。

百分比值是相对于元素大小的，这意味着如果元素的大小预期会有所不同，则可预测性会降低。例如50%，一旦元素不再是正方形，它就会开始呈现出椭圆形。

当您希望获得一致的结果不是基于元素而是基于设计规范时，绝对单位（例如px或）是首选。rem

em如果您想要一致性，但也想要比例元素，那么相对单位（例如视口单位）可能会很有用：

  • 视口单位在“桌面”上计算得较大，在“移动设备”上计算得较小，但在圆形外观上保持一致
  • em会根据 而变化font-size，导致字体较大的元素的角更加圆润，字体较小的元素的角更加圆润

概述box-shadow

就我个人而言，当它获得不错的支持时，最让我兴奋的事情box-shadow就是以更加原生的方式将模型从页面上弹出🙏

有一段时间，它们对于我们所谓的“拟物化设计”至关重要。而在过去一年里，它们在“新拟物化设计”的推动下有所回归。

这些术语对你来说很陌生吗？这里有一个很棒的概述，并结合了 UX Collective 的示例进行了比较。

但我box-shadow现在通常使用的只是对按钮或卡片等的高度进行微妙的暗示：

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 3px 4px 5px 0px rgba(0, 0, 0, 0.38);
Enter fullscreen mode Exit fullscreen mode

基本 box-shadow 演示

可以省略blur-radius和spread-radius，这样由于模糊效果的损失，阴影会更清晰。由于扩展旨在扩展到元素尺寸之外，因此阴影也不会超出偏移值。

在上面的例子中，我们实际上为阴影提供了一个“光源”，该光源位于元素的略左上方，而元素的略右下方则“投射”了阴影。

相反，您可以将偏移量设置为 0，以获得元素周围相等的阴影，尽管至少blur-radius需要这样做。如果spread-radius还提供了 ，则会对阴影应用缩放，使其超出元素的尺寸：

box-shadow: 0 0 .25em .25em rgba(0, 0, 0, 0.25);
Enter fullscreen mode Exit fullscreen mode

无偏移框阴影

我喜欢使用来为按钮box-shadow提供自定义的视觉状态。与 不同，不会改变元素的计算尺寸，这意味着添加或删除它不会导致它或其周围的元素发生重排。查看关于按钮的章节来了解该方法。:focusborderbox-shadow

的一个独特功能box-shadow是能够应用多个：

box-shadow: 2px 4px 0 4px yellowgreen, 4px 8px 0 8px pink, 8px 10px 0 12px navy;
Enter fullscreen mode Exit fullscreen mode

多个 box-shadow 值

“堆叠顺序”是这样的：第一组位于“顶部”，即视觉上最靠近元素，然后依次向下。这就是为什么spread-radius必须增加 ，否则“较低”的层将不可见（除非偏移量不重叠）。

我们还可以通过添加值来翻转box-shadow到元素内部inset：

box-shadow: inset 0 0 12px 4px rgba(0,0,0,0.8);
Enter fullscreen mode Exit fullscreen mode

这些值将应用非常字面的“插入”阴影外观，其中元素看起来“沉入”页面中：

插入框阴影

box-shadow图片黑客

我喜欢使用inset阴影的两种替代方法是用于图像。

关键在于堆叠顺序，并且事实box-shadow是放置在通过应用的图像之上background-image。

晕影

第一种是“晕影”，这是一种摄影技巧，照片的边缘会柔和地融入背景。这有助于突出照片的主体，尤其是在主体位于中心位置时。

但是，该inset属性不能直接用于，<img/>因为它被视为“空”元素，而不是容器元素。

相反，将background-image以下 CSS 应用于容器：

.vignette-container {
  width: 30vmin;
  height: 30vmin;
  box-shadow: inset 0 0 4vmin 3vmin rgba(0,0,0,0.5);
}
Enter fullscreen mode Exit fullscreen mode

下图是左图应用了晕影而右图未应用的比较。

左图应用了晕影的两张图片

我们使用vmin单位，以便box-shadow能够相对于 的整体图像尺寸进行缩放，而 的整体图像尺寸也是在 中设置的vmin。这是因为 无法box-shadow使用百分比设置，这使得相对于元素设置值变得有些困难。因此，一个巧妙的技巧是使用视口单位来设置元素的预期大小，以便在box-shadow不同视口尺寸下获得更可预测的结果。

图像彩色屏幕

我在使用时发现了这项技术，background-image但同时也想添加一个彩色“屏幕”——这意味着需要在图像上填充半透明的颜色。这项技术非常有用，它有助于保持背景图像上任何文本的对比度，并在一组原本不相关的图像之间建立视觉一致性。

我之前的解决方案（使用了很多年）是在包含元素上进行额外的绝对定位，:before并将屏幕颜色应用到那里background-color。

这是新的inset box-shadow解决方案：

box-shadow: inset 0 0 0 100vmax rgba(102, 76, 202, 0.65);
Enter fullscreen mode Exit fullscreen mode

左侧为有屏幕，右侧为无屏幕的对比：

屏幕对比图

你明白这个技巧了吗？我之前提到过百分比是不允许的，但既然可以使用视口单位，我们就把 设置为 ，spread这样100vmax它就很可能覆盖任何元素，除非你的元素大于视口最大宽度或最大高度的两倍。

等等——为什么要加倍？因为是从元素的各个边spread创建的，所以它的值至少是 的两倍。你可以使用上面的值来测试一下，并将容器设置为至少，看看容器中间在什么时候没有被覆盖。vmaxwidth: 100vw; height: 100vh

例如，如果您将它用于英雄形象以外的用途，则只需根据需要增加，例如200vmax。

如果有人知道这会影响性能，请告诉我！

演示

该演示更进一步，展示了如何object-fit在图像上使用以使它们表现得像background-image图像，同时仍然保留图像的语义，这在alt需要使用该属性时非常有用（剧透：为了可访问性，你应该大多数时候都走这条路）。

此外，h1标题已text-shadow应用，它是在 上进行动画处理:hover的。和header之间的主要区别在于没有属性。box-shadowtext-shadowtext-shadowspread

它还结合了内容图像的技术border-radius。box-shadow此外，内容图像还展示了如何box-shadow通过拉回晕影淡入淡出来实现动画效果，:hover从而达到高亮效果。

动画的额外技巧box-shadow是重新提供inset值，以确保淡入淡出后拉回时使用的是半透明的黑色而不是白色。这是因为box-shadow在大多数浏览器（Safari 除外）中，如果没有明确指定，并且列表项已设置，则默认使用当前颜色的值color: #fff。

额外福利：我最喜欢的“position:absolute杀手”使用 CSS 网格并将所有元素分配给相同的元素grid-area- 也许未来的剧集和/或书呆子视频会介绍这一点😉

文章来源：https://dev.to/5t3ph/expanded-use-of-box-shadow-and-border-radius-5ji
Devto 翻译
PREV
高级 CSS 选择器指南 - 第一部分
NEXT
使用纯 CSS 自定义选择样式