这篇翻译不完整。请帮忙从英语翻译这篇文章

这篇文章展示了盒子的小技巧,提供了一些高级特性的介绍,这些特性不适合其他类别的样式,比如盒子阴影、混合模式和过滤器。

预备知识: HTML 基础(学习 Introduction to HTML) ,了解CSS工作原理 (学习 Introduction to CSS.)
目标: 要了解如何使用高级的盒子效果,并了解一些在CSS语言中出现的新样式工具。

盒子阴影

回到我们的样式化文本模块,我们查看了text-shadow属性,它允许您将一个或多个阴影应用到元素的文本上。对于盒子来说,存在一个等价的属性——box-shadow允许您将一个或多个阴影应用到一个实际的元素盒子中。和文本阴影一样,盒子的阴影在浏览器中也得到了很好的支持,但只有在IE9+中。你的旧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, 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属性值中有4个项:

  1. 第一个长度值是水平偏移量(horizontal offset )——即向右的距离,阴影被从原始的框中偏移(如果值为负的话则为左)。
  2. 第二个长度值是垂直偏移量(vertical offset)——即阴影从原始盒子中向下偏移的距离(或向上,如果值为负)。
  3. 第三个长度的值是模糊半径(blur radius)——在阴影中应用的模糊度。
  4. 颜色值是阴影的基本颜色(base color)。

 

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

 

多个盒子阴影

还可以在单个box-shadow声明中指定多个框阴影,用逗号分隔:

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不同,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 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);
}

结果如下:

Here we've set up some button styling along with focus/hover/active states. The button has a simple black box shadow set on it by default, plus a couple of inset shadows, one light and one dark, placed on opposite corners of the button to give it a nice shading effect.

When the button is pressed in, the active state causes the first box shadow to be swapped for a very dark inset shadow, giving the appearance of the button being pressed in.

Note: There is another item that can be set in the box-shadow value — another length value can be optionally set just before the color value, which is a spread radius. If set, this causes the shadow to become bigger than the original box. It is not very commonly used, but worth mentioning.

Filters

CSS Filters provide a way to apply filters to an element in the same way as you might apply a filter to a layer in a graphics package like Photoshop. There are a number of different options available, and you can read all about them in greater detail on the filter reference page. In this section, we'll explain to you the syntax, and show you how much fun the results can be.

Basically, a filter can be applied to any element, block or inline — you just use the filter property, and give it a value of a particular filter function. Some of the filter options available do very similar things to other CSS features, for example drop-shadow() works in a very similar way and gives a similar effect to box-shadow or text-shadow.  The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, which can look nicer, although it may not always be what you want. Let's use a simple example to illustrate what we mean:

First, some simple HTML:

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

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

And now some CSS to a apply a drop shadow to each:

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);
}

This gives us the following result:

As you can see, the filter drop-shadow follows the exact shape of the text and border dashes. The box shadow just follows the square of the box.

Some other things to note:

  • 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.

Note: If you do decide to use prefixes in your code, make sure you include all the prefixes required as well as the non-prefixed version, so the maximum number of browsers possible can use the feature, and when browsers later drop the prefixes, they can use the non-prefixed version too. Also be warned that these experimental features might change, so your code might break. It is really best to just experiment with these features until the prefixes are removed.

You can see some other filter examples at filters.html (also see the source code).

Blend modes

CSS blend modes allow us to add blend modes to elements that specify a blending effect when two elements overlap — the final color shown for each pixel will be the result of a combination of the original pixel color, and that of the pixel in the layer underneath it. Blend modes are again very familiar to users of graphics applications like Photoshop.

There are two properties that use blend modes in CSS:

  • background-blend-mode, which blends together multiple background images and colors set on a single element.
  • mix-blend-mode, which blends together the element it is set on with elements it is overlapping — both background and content.

You can find a lot more examples than are available here in our blend-modes.html example page (see source code), and on the <blend-mode> reference page.

Note: Blend modes are also very new, and slightly less well supported than filters. There is no support as yet in Edge, and Safari only supports some of the blend mode options.

background-blend-mode

Again, let's look at some examples so we can understand this better. First, background-blend-mode — here we'll show a couple of simple <div>s, so you can compare the original with the blended version:

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

Now some CSS — we are adding two background images to the <div>s: a linear gradient and a png:

div {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px;
  background-color: green;
}

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

The result we get is this — you can see the original on the left, and the multiply blend mode on the right:

mix-blend-mode

Now let's look at mix-blend-mode. Here we'll present the same two <div>s, but each one is now sat on top of a simple <div> with a purple background, to show how the elements will blend together:

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

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

Here's the CSS we'll style this with:

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: url(https://mdn.mozillademos.org/files/13090/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;
}

结果如下:

你可以看到,混合的混合混合不仅混合了两种背景图像,还混合了在<div>下面的颜色。

注意:如果您不理解上面的一些布局属性,请不要担心,像 positiontopbottomz-index等。我们将在CSS Layout模块中详细地介绍这些内容。

-webkit-background-clip: text

另一个我们认为在继续之前会提到的新特性(目前支持Chrome、Safari和Opera,和在Firefox正在实现)是background-cliptext 值。当与专有 -webkit-text-fill-color: transparent; 特性一起使用时,这允许您将背景图像剪贴到元素文本的形状,从而产生一些不错的效果。这不是一个正式的标准,但是已经在多个浏览器中实现了,因为它很流行,并且被开发人员广泛使用。在这种情况下,这两种属性都需要一个-webkit-供应商前缀,甚至对于非webkit/Chrome-based的浏览器来说也是如此。

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

那么为什么其他浏览器会实现一个-webkit-前缀?主要是为了浏览器兼容性——许多web开发人员已经开始使用-webkit-前缀来实现web站点,它开始看起来像其他的浏览器一样被破坏了,而实际上他们遵循的是标准。因此,他们被迫实施了一些这样的功能。这就凸显了在你的工作中使用非标准和/或带前缀的CSS特性的危险——这不仅会导致浏览器兼容性问题,而且还会发生变化,因此你的代码随时可能崩溃。坚持标准要好得多。

如果您确实希望在您的生产工作中使用这些特性,请确保在浏览器中进行彻底的测试,并检查这些特性不工作的地方,站点仍然可用。

注意:对于一个完整的-webkit-background-clip: text代码示例,见background-clip-text.html(也可以见源码)。

自主学习:尝试一些效果

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

如果你犯了一个错误,你可以用Reset按钮来重置这个例子。

总结

我们希望这篇文章被证明是很有趣的——玩着闪亮的玩具通常是很有趣的,而且看看什么样的工具在尖端的浏览器中是可以得到的是我们很感兴趣的。您已经到达了样式盒文章的末尾,因此,接下来您将通过我们的评估来测试您的box syling技能。

文档标签和贡献者

 此页面的贡献者: Froggy
 最后编辑者: Froggy,