本集将探讨box-shadow 和border-radius 的扩展用法，并以一个使用这些属性来增强图片展示的着陆页演示作为结束。
你将学会：
border-radius的扩展语法，以及何时使用哪种类型的单位来设置数值- 如何创建多个
box-shadow层 - 关于
box-shadow值inset - 如何用
inset"破解 "box-shadow，以应用流行的图像过滤技术
border-radius#的概述
现在的孩子们再也不用为你希望显示为圆形的div的每个角创建gif了😂真的，border-radius 的发布和最终支持是CSS中最重要的里程碑之一。
为了复习一下，下面是它经常被使用的方式：
border-radius: 50%;
对于一个正方形元素来说，这将导致一个圆形的外观。
或者将其缩减，使原本尖锐的方形角略微圆润一些，比如对于一个按钮或卡片，你可能会使用：
border-radius: 8px;
有一种方法可以让你更进一步，就是使用两个值，第一个值设置左上角和右下角，第二个值设置右上角和左下角：
border-radius: 20% 50%;
这......看起来有点像柠檬？
现在，给定相同的值，但不同的尺寸，这些结果会有相当大的差异。
我们也可以设置所有四个角：
/* top-left | top-right | bottom-right | bottom-left */
border-radius: 3vw 4vw 8vw 2vw;
但是等等--还有更多
有一个超级大的扩展语法，允许你定义每个角的水平和垂直半径。默认的圆角是非常圆的，添加额外的半径可以改变产生角的 "剪裁"，从而允许出现时髦的 "圆球 "形状。
看看Jhey的这个border-radius playground，它有一个配置面板和实时预览，可以生成扩展语法
border-radius。
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);
省略blur-radius 和spread-radius 是可以接受的，这将导致一个更清晰的阴影，因为失去了模糊性。阴影也不会延伸到偏移值之外，因为传播的目的是为了超越元素的尺寸。
在上面的例子中，我们基本上给了阴影一个 "光源"，它在元素的左上方，而元素的右下方又 "投射 "了阴影。
相反，你可以把偏移量设置为0，以获得一个在元素周围相等的阴影，尽管至少需要blur-radius 。如果还提供了spread-radius ，这将对阴影施加比例，使其超出元素的尺寸。
box-shadow: 0 0 0.25em 0.25em rgba(0, 0, 0, 0.25);
我喜欢用box-shadow ，在按钮上提供一个自定义的视觉:focus 状态。与border 不同，box-shadow 不会改变元素的计算尺寸，这意味着添加或删除它不会导致它或它周围的元素从回流中转移。请看关于按钮的那一集，看看这个方法。
box-shadow 的一个独特的功能是能够应用倍数。
box-shadow: 2px 4px 0 4px yellowgreen, 4px 8px 0 8px pink, 8px 10px 0 12px navy;
叠加顺序 "是这样的：第一组 "在上面"，或者说在视觉上最接近元素，然后从那里往下。这就是为什么必须增加spread-radius ，否则 "较低 "的层将不可见（除了偏移量不重叠的地方）。
我们也可以通过增加inset 的值将box-shadow 翻到元素的内部。
box-shadow: inset 0 0 12px 4px rgba(0, 0, 0, 0.8);
这些值将应用一个非常直白的 "嵌入 "阴影外观，元素看起来 "沉入 "了页面。
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);
}
下面是一个比较，左边的图片应用了晕轮，右边的没有：
我们使用了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);
左边是屏幕的对比，右边是没有屏幕的对比。
你发现黑客了吗？我提到百分比是不允许的--但由于视口单位是允许的，我们把spread 设置为100vmax ，这可能会覆盖任何元素，除非你的元素大于视口最大宽度或最大高度的两倍。
等一下--为什么是双倍？因为spread 是从元素的所有侧面创建的，所以它至少是vmax 的两倍。你可以通过使用上述值并将你的容器至少设置为width: 100vw; height: 100vh ，看看在什么时候容器的中间没有被覆盖，来测试一下。
如果你把它用于比英雄图像更多的东西，例如，只需根据需要增加，如增加到200vmax 。
如果有人知道这样做会影响性能，请告诉我。
