框阴影

回到我们的造型文字模块中，我们查看了 / text-shadow"> text-shadow 属性，它允许您将一个或多个阴影应用于元素的文本。 嗯，对于框，存在一个等效属性 - box-shadow / a>允许您将一个或多个阴影应用于实际元素框。 像文本阴影，箱子阴影在浏览器中支持相当好，但只在IE9 +。 您的老IE版本的用户可能只需要处理没有阴影，所以只要测试您的设计，以确保您的内容没有他们清晰。

您可以在框中找到本部分中的示例， 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, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.simple {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

这给我们以下结果:

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

1. The first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
2. The second length value is the vertical offset — the distance downwards that the shadow is offset from the original box (or upwards, if the value is negative).
3. The third length value is the blur radius — the amount of blurring applied to the shadow.
4. The color value is the base color of the shadow.

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

多箱阴影

您还可以在单个 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, rgba(0,0,0,0), rgba(0,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 不同， "https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow"> box-shadow 有一个插入 关键字可用 - 将其放在阴影声明的开头，使其成为内部阴影，而不是外部阴影。 让我们来看看我们的意思。

首先，我们将为这个例子使用一些不同的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 rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

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 rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

这给我们以下结果:

在这里，我们设置了一些按钮样式以及焦点/悬停/活动状态。 默认情况下，按钮上有一个简单的黑盒阴影，加上几个阴影，一个光和一个黑暗，放置在按钮的对角，给它一个很好的阴影效果。

当按下按钮时，活动状态导致第一框阴影被交换为非常暗的阴影，给出被按压的按钮的外观。

过滤器

CSS过滤器提供了一种将过滤器应用到元素的方式，就像您可以将过滤器应用于图形包中的图层一样，如Photoshop。 有多种不同的选项可供使用，您可以在 代码>过滤器 参考页。 在本节中，我们将向您解释语法，并告诉您结果有多有趣。

基本上，一个过滤器可以应用于任何元素，块或内联 - 你只需使用 filter 属性，并给它一个特定的过滤器函数的值。 一些过滤器选项可以与其他CSS功能做类似的事情，例如 drop-shadow()以非常相似的方式工作，并给出类似的效果 developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow"> box-shadow 或 / zh-CN / docs / Web / CSS / text-shadow"> text-shadow 。 然而，过滤器的真正好处在于，它们处理框内的内容的确切形状，而不仅仅是框的本身作为一个大块，它可以看起来更好，虽然它可能不总是你想要的。 让我们用一个简单的例子来说明我们的意思:

首先，一些简单的HTML:

<p class="filter">Filter</p>

<p class="box-shadow">Box shadow</p>

现在一些CSS为每个应用一个阴影:

p {
  margin: 1rem auto;
  padding: 20px;
  width: 100px;
  border: 5px dashed red;
}

.filter {
  -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
  filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7));
}

.box-shadow {
  box-shadow: 5px 5px 1px rgba(0,0,0,0.7);
}

这给我们以下结果:

如您所见，过滤器阴影跟随文本和边框破折号的确切形状。 箱子阴影只是跟随箱子的正方形。

还有一些要注意的事情:

• Filters are very new — they are supported in most modern browsers, including Microsoft Edge, but they are not supported in Internet Explorer at all. If you use filters in your designs, you should therefore make sure your content is usable without the filters.
• You'll see that we've included a version of the filter property with -webkit- prefixed. This is called a Vendor Prefix, and is used sometimes by a browser before it finalizes its implementation of a new feature, to support that feature and experiment with it while not clashing with the non-prefixed version. Vendor prefixes were never intended to be used by web developers, but they do get used sometimes on production pages if experimental features are really desired. In this case, the -webkit- version of the property is currently required for Chrome/Safari/Opera support, while Edge and Firefox use the final, non-prefixed version.

您可以在 filters.html 上查看其他过滤器示例， a>(另请参阅源代码 / a>)。

混合模式

CSS混合模式允许我们在两个元素重叠时为混合效果添加混合模式 - 每个像素显示的最终颜色将是原始像素颜色和下面图层中像素的组合的结果 它。 混合模式对于诸如Photoshop的图形应用程序的用户也是非常熟悉的。

在CSS中有两种使用混合模式的属性: background-blend- mode ，它将在单个元素上设置的多个背景图片和颜色混合在一起， mix-blend-mode"> mix-blend-mode ，它将它所设置的元素与它重叠的元素(包括背景和内容)混合在一起。

您可以在我们的 "> blend-modes.html 示例页面(请参阅 html"class ="external">源代码)，并在 代码>< blend-mode> 参考页。

背景混合模式

再次，让我们看一些例子，这样我们可以更好地理解这一点。 首先， background-blend-mode - 在这里，我们将展示一些简单的 < div> > s，因此您可以将原始版本与混合版本进行比较:

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

现在一些CSS - 我们添加了两个背景图片到< div> s:线性渐变和png:

div {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
              linear-gradient(to bottom right, #f33, #a33);
}

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

我们得到的结果是 - 你可以看到右边的乘法混合模式:

混合混合模式

现在，让我们来看看 mix-blend-mode a>。 这里我们将展示相同的两个< 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: 300px;
  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-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
                  linear-gradient(to bottom right, #f33, #a33);
}

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

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

这给了我们以下结果:

你可以看到这里的多重混合混合不仅混合在一起的两个背景图像，而且从底部< div> 下面的颜色混合。

-webkit-background-clip:文本

在继续之前(目前在Chrome，Safari和Opera中支持，并在Firefox中实现)，另一个我们认为我们会简要提到的新特性是 text /developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip"> background-clip 。 当与 -webkit-text-fill-color:transparent; 特性一起使用时，这允许您将背景图像剪切到元素文本的形状，从而获得一些不错的效果。 这不是一个官方标准，但已经在多个浏览器上实现，因为它是受欢迎的，开发人员使用相当广泛。 在此上下文中使用时，即使对于非Webkit / Chrome浏览器，这两个属性都需要 -webkit - 供应商前缀:

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

那么为什么其他浏览器实现一个 -webkit - 前缀？ 主要是为了浏览器兼容性 - 所以许多web开发人员已经开始用 -webkit - 前缀实现网站，它开始看起来像其他浏览器被打破，而实际上他们遵循标准。 所以他们被迫实现一些这样的功能。 这突出了在您的工作中使用非标准和/或前缀CSS功能的危险 - 不仅会导致浏览器兼容性问题，但它们也可能更改，因此您的代码可能随时中断。 坚持标准是更好的。

如果您确实希望在生产工作中使用这些功能，请确保彻底地跨浏览器进行测试，并检查在这些功能不起作用的情况下，该网站仍然可用。

主动学习:实验一些效果

现在轮到你了。 对于这种主动学习，我们希望您使用下面提供的代码来实验您上面阅读的一些效果。

如果出错，您可以随时使用重置按钮重置示例。

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me">
</div></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
              linear-gradient(to bottom right, #f33, #a33);
} </textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

概要

我们希望这篇文章被证明是有趣的玩玩玩具通常是闪亮的玩具，总是很有趣，看看什么样的工具，正在变得可用在尖端的浏览器。 您已到达样式框文章的末尾，因此接下来您将使用我们的评估测试您的盒子样式技能。