框陰影

回到我們的造型文字模塊中，我們查看了 / 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>

現(xiàn)在的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;
}

現(xiàn)在我們得到這個結果:

我們在這里做了一些有趣的事情，通過創(chuàng)建一個帶有多個彩色圖層的凸起框，但是你可以以任何你想要的方式使用它，例如使用基于多個光源的陰影創(chuàng)建一個更逼真的外觀。

其他箱陰影特征

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

這給我們以下結果:

在這里，我們設置了一些按鈕樣式以及焦點/懸停/活動狀態(tài)。 默認情況下，按鈕上有一個簡單的黑盒陰影，加上幾個陰影，一個光和一個黑暗，放置在按鈕的對角，給它一個很好的陰影效果。

當按下按鈕時，活動狀態(tài)導致第一框陰影被交換為非常暗的陰影，給出被按壓的按鈕的外觀。

過濾器

CSS過濾器提供了一種將過濾器應用到元素的方式，就像您可以將過濾器應用于圖形包中的圖層一樣，如Photoshop。 有多種不同的選項可供使用，您可以在 代碼>過濾器 參考頁。 在本節(jié)中，我們將向您解釋語法，并告訴您結果有多有趣。

基本上，一個過濾器可以應用于任何元素，塊或內聯(lián) - 你只需使用 filter 屬性，并給它一個特定的過濾器函數(shù)的值。 一些過濾器選項可以與其他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>

現(xiàn)在一些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>

現(xiàn)在一些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;
}

我們得到的結果是 - 你可以看到右邊的乘法混合模式:

混合混合模式

現(xiàn)在，讓我們來看看 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:文本

在繼續(xù)之前(目前在Chrome，Safari和Opera中支持，并在Firefox中實現(xiàn))，另一個我們認為我們會簡要提到的新特性是 text /developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip"> background-clip 。 當與 -webkit-text-fill-color:transparent; 特性一起使用時，這允許您將背景圖像剪切到元素文本的形狀，從而獲得一些不錯的效果。 這不是一個官方標準，但已經在多個瀏覽器上實現(xiàn)，因為它是受歡迎的，開發(fā)人員使用相當廣泛。 在此上下文中使用時，即使對于非Webkit / Chrome瀏覽器，這兩個屬性都需要 -webkit - 供應商前綴:

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

那么為什么其他瀏覽器實現(xiàn)一個 -webkit - 前綴？ 主要是為了瀏覽器兼容性 - 所以許多web開發(fā)人員已經開始用 -webkit - 前綴實現(xiàn)網站，它開始看起來像其他瀏覽器被打破，而實際上他們遵循標準。 所以他們被迫實現(xiàn)一些這樣的功能。 這突出了在您的工作中使用非標準和/或前綴CSS功能的危險 - 不僅會導致瀏覽器兼容性問題，但它們也可能更改，因此您的代碼可能隨時中斷。 堅持標準是更好的。

如果您確實希望在生產工作中使用這些功能，請確保徹底地跨瀏覽器進行測試，并檢查在這些功能不起作用的情況下，該網站仍然可用。

主動學習:實驗一些效果

現(xiàn)在輪到你了。 對于這種主動學習，我們希望您使用下面提供的代碼來實驗您上面閱讀的一些效果。

如果出錯，您可以隨時使用重置按鈕重置示例。

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

概要

我們希望這篇文章被證明是有趣的玩玩玩具通常是閃亮的玩具，總是很有趣，看看什么樣的工具，正在變得可用在尖端的瀏覽器。 您已到達樣式框文章的末尾，因此接下來您將使用我們的評估測試您的盒子樣式技能。