We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how.

我們可以使用CSS屬性box-shadow將陰影添加到任何HTML元素。 這是如何做。

添加基本??投影 (Adding a Basic Drop Shadow)

Let's first set up some basic HTML elements to add our drop shadows to:

讓我們首先設(shè)置一些基本HTML元素，以將陰影添加到：

<div id="box1" class="box">Box1</div> <div id="box2" class="box">Box2</div> <div id="box3" class="box">Box3</div>

Then add some basic CSS:

然后添加一些基本CSS：

p {padding: 10px; } .box {padding: 20px;width: 50%;margin: 30px auto;background: #000;color: #fff; }

The result is just three black boxes that will be easy for us to add drop shadows to by calling their unique id's:

結(jié)果只有三個(gè)黑匣子，我們可以通過調(diào)用它們的唯一ID輕松添加陰影：

To add a basic drop shadow, let's use the box-shadow property on the Box 1:

要添加基本的陰影，請(qǐng)使用Box 1上的box-shadow屬性：

/* offset-x | offset-y | color */ #box1 {box-shadow: 6px 12px yellow; }

We have 3 parameters here. The first 2 are, respectively, the x-offset and y-offset. They set the location of the drop shadow.

這里有3個(gè)參數(shù)。 前兩個(gè)分別是x偏移和y偏移。 他們?cè)O(shè)置陰影的位置。

The offset is relative to the origin, which in HTML is always the top left corner of an element. A positive x-offset will move the shadow to the right, and a positive y-offset will move the shadow downwards.

偏移量是相對(duì)于原點(diǎn)的，原點(diǎn)在HTML中始終是元素的左上角。 正x偏移將陰影向右移動(dòng)，正y偏移將陰影向下移動(dòng)。

The third parameter is the color of your drop shadow.

第三個(gè)參數(shù)是投影的顏色。

Keep in mind that although we used <div> elements here, the box-shadow property can be applied to any other HTML element as well.

請(qǐng)記住，盡管我們?cè)谶@里使用了<div>元素，但是box-shadow屬性也可以應(yīng)用于任何其他HTML元素。

添加模糊半徑 (Adding a Blur Radius)

If we want the shadow to look a little more realistic, we will want to experiment with the blur-radius parameter.

如果我們希望陰影看起來更真實(shí)一些，我們將嘗試使用blur-radius參數(shù)。

This parameter controls how much to blur the shadow such that it becomes bigger and lighter. Let's apply it to Box 2:

此參數(shù)控制模糊程度以使其變大和變亮的程度。 讓我們將其應(yīng)用于方框2：

/* offset-x | offset-y | blur-radius | color */ #box2 {box-shadow: 6px 12px 4px red; }

The value of 4px sets the radius of the blur to apply to our drop shadow.

4px的值設(shè)置模糊的半徑以應(yīng)用于我們的陰影。

添加傳播半徑 (Adding a Spread Radius)

If we want to control the size of the shadow, we can use the spread-radius parameter which controls how much a shadow grows or shrinks.

如果要控制陰影的大小，則可以使用spread-radius參數(shù)來控制陰影的增長(zhǎng)或收縮程度。

Let's add a spread radius of 8px to Box 2:

讓我們?cè)诳?中添加一個(gè)8px的展開半徑：

/* offset-x | offset-y | blur-radius | spread-radius | color */ #box2 {box-shadow: 6px 12px 4px 8px red; }

Remember the order of these parameters!

記住這些參數(shù)的順序！

在單個(gè)屬性中組合多個(gè)陰影 (Combining Multiple Shadows in a Single Property)

If we want to get fancy, we can add multiple drop shadows to an element using a single box-shadow property.

如果想花哨的話，可以使用單個(gè)box-shadow屬性為元素添加多個(gè)陰影。

Let's do that with Box 3 by simultaneously adding a blue and green drop shadow:

讓我們?cè)诜娇?中同時(shí)添加一個(gè)藍(lán)色和綠色的陰影來做到這一點(diǎn)：

/* Any number of shadows, separated by commas */ #box3 {box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green; }

獎(jiǎng)勵(lì)：創(chuàng)建插入陰影 (Bonus: Create an Inset Shadow)

While it will not create a drop shadow, the inset parameter can also be used with the box-shadow property.

盡管不會(huì)創(chuàng)建陰影，但inset參數(shù)也可以與box-shadow屬性一起使用。

As the name suggests, this parameter creates an inset shadow (i.e. shadow inside a box).

顧名思義，此參數(shù)將創(chuàng)建插入陰影(即，框內(nèi)的陰影)。

The inset parameter can be placed either at the beginning or the end of the box-shadow property. Here we demonstrate its use with a blockquote element.

可以將inset參數(shù)放在box-shadow屬性的開頭或結(jié)尾。 在這里，我們通過blockquote元素演示其用法。

HTML:

HTML：

<blockquote><q>The key to success is to start before you're ready.</q><p>&mdash; Marie Forleo</p> </blockquote>

CSS:

CSS：

blockquote {width: 50%;margin: 50px auto;padding: 20px;font-size: 24px;box-shadow: inset 10px 5px black; }

Of course you can add some blur and spread to enhance the shadow, or even multiple shadows:

當(dāng)然，您可以添加一些模糊和散布以增強(qiáng)陰影，甚至多個(gè)陰影：

box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;

With the box-shadow property, we can easily make elements on a web page stand out to create a nice 3D lighting effect.

使用box-shadow屬性，我們可以輕松地使網(wǎng)頁(yè)上的元素突出以創(chuàng)建漂亮的3D照明效果。

If you want to do some experimenting yourself, here's a code pen I created with the examples used in this tutorial.

如果您想做一些實(shí)驗(yàn)，請(qǐng)使用我在本教程中使用的示例創(chuàng)建的一支代碼筆 。

Play around and see what you can come up with!

玩轉(zhuǎn)，看看你能想到什么！

是否想查看更多Web開發(fā)技巧和知識(shí)？ (Want to See More Web Development Tips and Knowledge?)

• Subscribe to my weekly newsletter

  訂閱我的每周新聞

• Visit my blog at ?1000 Mile World

  訪問我在1000 Mile World上的博客

• Follow me on Twitter

  在Twitter上關(guān)注我

翻譯自: https://www.freecodecamp.org/news/css-tutorial-drop-shadow/

總結(jié)

以上是生活随笔為你收集整理的Box Shadow CSS教程–如何向任何HTML元素添加投影的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。