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:
讓我們首先設置一些基本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:
結果只有三個黑匣子，我們可以通過調用它們的唯一ID輕松添加陰影：
To add a basic drop shadow, let's use the box-shadow property on the Box 1:
要添加基本的陰影，請使用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個參數。 前兩個分別是x偏移和y偏移。 他們設置陰影的位置。
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.
偏移量是相對于原點的，原點在HTML中始終是元素的左上角。 正x偏移將陰影向右移動，正y偏移將陰影向下移動。
The third parameter is the color of your drop shadow.
第三個參數是投影的顏色。
Keep in mind that although we used <div> elements here, the box-shadow property can be applied to any other HTML element as well.
請記住，盡管我們在這里使用了<div>元素，但是box-shadow屬性也可以應用于任何其他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.
如果我們希望陰影看起來更真實一些，我們將嘗試使用blur-radius參數。
This parameter controls how much to blur the shadow such that it becomes bigger and lighter. Let's apply it to Box 2:
此參數控制模糊程度以使其變大和變亮的程度。 讓我們將其應用于方框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的值設置模糊的半徑以應用于我們的陰影。
添加傳播半徑 (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參數來控制陰影的增長或收縮程度。
Let's add a spread radius of 8px to Box 2:
讓我們在框2中添加一個8px的展開半徑：
/* offset-x | offset-y | blur-radius | spread-radius | color */
#box2 {box-shadow: 6px 12px 4px 8px red;
}Remember the order of these parameters!
記住這些參數的順序！
在單個屬性中組合多個陰影 (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.
如果想花哨的話，可以使用單個box-shadow屬性為元素添加多個陰影。
Let's do that with Box 3 by simultaneously adding a blue and green drop shadow:
讓我們在方框3中同時添加一個藍色和綠色的陰影來做到這一點：
/* Any number of shadows, separated by commas */
#box3 {box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green;
}獎勵：創建插入陰影 (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.
盡管不會創建陰影，但inset參數也可以與box-shadow屬性一起使用。
As the name suggests, this parameter creates an inset shadow (i.e. shadow inside a box).
顧名思義，此參數將創建插入陰影(即，框內的陰影)。
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參數放在box-shadow屬性的開頭或結尾。 在這里，我們通過blockquote元素演示其用法。
HTML:
HTML：
<blockquote><q>The key to success is to start before you're ready.</q><p>— 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:
當然，您可以添加一些模糊和散布以增強陰影，甚至多個陰影：
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屬性，我們可以輕松地使網頁上的元素突出以創建漂亮的3D照明效果。
If you want to do some experimenting yourself, here's a code pen I created with the examples used in this tutorial.
如果您想做一些實驗，請使用我在本教程中使用的示例創建的一支代碼筆 。
Play around and see what you can come up with!
玩轉，看看你能想到什么！
是否想查看更多Web開發技巧和知識？ (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上關注我
翻譯自: https://www.freecodecamp.org/news/css-tutorial-drop-shadow/
