高级样式效果

box-shadow 允许您将一个或多个投影应用到元素的框上。与文本阴影一样，盒阴影在浏览器中得到很好的支持，包括 IE9+ 和 Edge。较旧的 IE 版本的用户可能只能应付没有阴影的情况，因此请测试您的设计，确保您的内容在没有阴影的情况下仍然可读。

您可以在 box-shadow.html 中找到本节中的示例（另请参阅 源代码）。

让我们看一个简单的示例来开始。首先，一些 HTML 代码

<article class="simple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>

现在是 CSS 代码

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%),
    rgb(0 0 0 / 25%)
  );
}

.simple {
  box-shadow: 5px 5px 5px rgb(0 0 0 / 70%);
}

这将给我们以下结果

您会看到我们在 box-shadow 属性值中有四个项目

1. 第一个长度值是水平偏移量——阴影从原始框向右偏移的距离（或向左，如果值为负）。
2. 第二个长度值是垂直偏移量——阴影从原始框向下偏移的距离（或向上，如果值为负）。
3. 第三个长度值是模糊半径——应用于阴影的模糊量。
4. 颜色值是阴影的基本颜色。

您可以使用任何有意义的长度和颜色单位来定义这些值。

您还可以在单个 box-shadow 声明中指定多个盒阴影，方法是用逗号分隔它们

<article class="multiple">
  <p>
    <strong>Warning</strong>: The thermostat on the cosmic transcender has
    reached a critical level.
  </p>
</article>

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%),
    rgb(0 0 0 / 25%)
  );
}

.multiple {
  box-shadow: 1px 1px 1px black,
              2px 2px 1px black,
              3px 3px 1px red,
              4px 4px 1px red,
              5px 5px 1px black,
              6px 6px 1px black;
}

现在我们得到以下结果

我们在这里做了一些有趣的事情，通过创建具有多个彩色层的凸起框，但您可以根据需要使用它，例如创建更逼真的外观，阴影基于多个光源。

与 text-shadow 不同，box-shadow 有一个 inset 关键字可用——将其放在阴影声明的开头会导致它成为内阴影，而不是外阴影。让我们来看看这意味着什么。

首先，我们将使用一些不同的 HTML 代码作为此示例

<button>Press me!</button>

button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow:
    1px 1px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
}

button:focus,
button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow:
    inset 2px 2px 1px black,
    inset 2px 3px 5px rgb(0 0 0 / 30%),
    inset -2px -3px 5px rgb(255 255 255 / 50%);
}

这将给我们以下结果

在这里，我们设置了一些按钮样式以及焦点/悬停/活动状态。按钮默认情况下设置了一个简单的黑色盒阴影，再加上两个内阴影，一个亮一个暗，放置在按钮的相对角上，以使其具有良好的阴影效果。

当按钮被按下时，活动状态会导致第一个盒阴影被交换为非常深的内阴影，从而使按钮看起来被按下。

虽然您不能使用 CSS 更改图像的构成，但您可以做一些有创意的事情。一个非常好的属性，可以帮助您为您的设计带来趣味，是 filter 属性。此属性直接从 CSS 启用 Photoshop 样式的滤镜。

在下面的示例中，我们使用了两个不同的滤镜值。first 是 blur()——此函数可以传递一个值来指示图像应该模糊多少。

第二个是 grayscale()；通过使用百分比，我们设置了要删除的颜色量。

在实时示例中使用百分比和像素参数进行调整，以查看图像如何变化。您也可以将这些值换成其他一些值。在上面的实时示例中尝试 contrast(200%)、invert(100%) 或 hue-rotate(20deg)。查看 filter 的 MDN 页面，了解您可以尝试的许多其他选项。

您可以将滤镜应用于任何元素，而不仅仅是图像。一些可用的滤镜选项与其他 CSS 功能非常相似，例如 drop-shadow() 的工作方式非常相似，并且与 box-shadow 或 text-shadow 具有相似的效果。但是，滤镜真正的好处在于它们可以作用于框内内容的确切形状，而不仅仅是框本身作为一大块，因此了解区别非常重要。

在接下来的示例中，我们将滤镜应用于一个框，并将其与一个盒阴影进行比较。如您所见，drop-shadow 滤镜遵循文本和边框破折号的确切形状。盒阴影只遵循框的正方形。

CSS 混合模式允许我们在元素中添加混合模式，指定两个元素重叠时的混合效果——每个像素显示的最终颜色将是原始像素颜色与其下方图层中像素颜色的组合结果。混合模式对于使用 Photoshop 等图形应用程序的用户来说非常熟悉。

CSS 中有两个使用混合模式的属性

• background-blend-mode，它将单个元素上设置的多个背景图像和颜色混合在一起。
• mix-blend-mode，它将它所设置的元素与其重叠的元素混合在一起——包括背景和内容。

您可以在我们的 blend-modes.html 示例页面（查看 源代码）和 <blend-mode> 参考页面上找到比这里更多的一些示例。

再次，让我们看一些示例，以便我们更好地理解这一点。首先，background-blend-mode——在这里我们将显示几个简单的 <div>，这样您就可以比较原始版本和混合版本

<div></div>
<div class="multiply"></div>

现在是一些 CSS 代码——我们将为 <div> 添加一个背景图像和一个绿色背景颜色

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

.multiply {
  background-blend-mode: multiply;
}

我们得到的结果如下——您可以在左侧看到原始版本，在右侧看到 multiply 混合模式

现在让我们看一下 mix-blend-mode。在这里，我们将呈现相同的两个 <div>，但每个 <div> 现在都位于一个简单的 <div> 之上，该 <div> 具有紫色背景，以显示元素如何混合在一起

<article>
  No mix blend mode
  <div></div>
  <div></div>
</article>

<article>
  Multiply mix
  <div class="multiply-mix"></div>
  <div></div>
</article>

以下是我们将使用它进行样式设置的 CSS 代码

article {
  width: 280px;
  height: 180px;
  margin: 10px;
  position: relative;
  display: inline-block;
}

div {
  width: 250px;
  height: 130px;
  padding: 10px;
  margin: 10px;
}

article div:first-child {
  position: absolute;
  top: 10px;
  left: 0;
  background: url(colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

article div:last-child {
  background-color: purple;
  position: absolute;
  bottom: -10px;
  right: 0;
  z-index: -1;
}

.multiply-mix {
  mix-blend-mode: multiply;
}

这将给我们以下结果

您在这里可以看到，multiply 混合模式不仅混合了两个背景图像，而且还混合了来自其下方 <div> 的颜色。

虽然 CSS 中的所有内容都是一个矩形框，图像也是一个物理矩形框，但我们可以通过使用 CSS 形状 来使其看起来像我们的内容围绕着非矩形的东西流动。

CSS 形状规范支持在非矩形形状周围包裹文本。在处理包含一些空白的图像时，这尤其有用，您可能希望将文本围绕它进行浮动。

在下图中，我们有一个令人愉悦的圆形气球。实际文件是矩形的，但通过浮动图像（形状仅适用于浮动元素）并使用 shape-outside 属性，其值为 circle(50%)，我们可以产生文本跟随气球线的效果。

此示例中的形状不会对图像文件的内容做出反应。相反，circle 函数从图像文件中心获取其中心点，就好像我们在文件中心放了一个指南针并绘制了一个适合文件内的圆圈。正是这个圆圈使文本围绕它流动。

circle() 函数只是定义的几个基本形状之一，但是有许多不同的方法可以创建形状。有关 CSS 形状的更多信息和示例代码，请查看 MDN 上的 CSS 形状指南。

另一个我们想简要提到的功能是 background-clip 的 text 值。当与专有 -webkit-text-fill-color: transparent; 功能一起使用时，这允许您将背景图像剪裁到元素文本的形状，从而产生一些不错的效果。这不是官方标准，但在多个浏览器中已实现，因为它很流行，并且被开发人员广泛使用。在这种情况下的使用中，这两个属性都需要一个 -webkit- 供应商前缀，即使对于非 Webkit/Chrome 基浏览器也是如此

.text-clip {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

那么为什么其他浏览器实现了 -webkit- 前缀呢？主要原因是浏览器兼容性——如此多的 Web 开发人员开始使用 -webkit- 前缀来实现网站，以至于其他浏览器看起来像是坏了，而实际上他们是在遵循标准。因此，他们被迫实现一些这样的功能。这突出了在您的工作中使用非标准和/或带前缀的 CSS 功能的危险——它们不仅会导致浏览器兼容性问题，而且还可能会发生变化，因此您的代码随时可能出现故障。最好坚持使用标准。

如果您确实要在生产工作中使用此类功能，请确保在不同浏览器中彻底测试，并检查在这些功能不起作用的情况下，网站是否仍然可用。

我们希望这篇文章很有趣 - 玩闪亮玩具通常很有趣，而且总是很有趣地看到现代浏览器中有哪些高级的样式工具可以使用。

• 上一篇
• 概述：CSS 构建块
• 下一篇