箱陰影
隨著CSS3可以創建陰影效果！
將鼠標懸停在我！
CSS3陰影效果
隨著CSS3您可以添加陰影文字和元素。
在本章中，您將了解以下屬性：
-
text-shadow -
box-shadow
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次是數字-webkit-或-moz-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3文字陰影
CSS3的text-shadow屬性應用於陰影文本。
在最簡單的使用，你只指定水平陰影（2像素）和垂直陰影（2像素）：
文字陰影效果！
接著，添加顏色的陰影：
文字陰影效果！
然後，添加一個模糊效果的陰影：
文字陰影效果！
下面的例子顯示了一個白色文字與黑色的影子：
文字陰影效果！
下面的示例顯示一個紅色的霓虹發光的影子：
文字陰影效果！
多重陰影
要添加多個陰影文本，你可以添加一個逗號分隔陰影列表。
下面的例子顯示了紅色和藍色的霓虹發光的影子：
文字陰影效果！
下面的例子顯示了一個白色的文字加黑，藍，darkblue陰影：
文字陰影效果！
CSS3 box-shadow屬性
在CSS3 box-shadow屬性應用於陰影元素。
在最簡單的使用，你只指定水平的陰影和垂直陰影：
這是一個黃色<div>採用黑色元素box-shadow
接著，添加顏色的陰影：
這是一個黃色<div>帶有灰色元素box-shadow
接下來，添加一個模糊效果的陰影：
這是一個黃色<div>有一個模糊的灰色元素box-shadow
您還可以添加陰影到::前後::偽類後，創建一個有趣的效果：
例
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} 試一試» 牌
使用的例子box-shadow屬性創建紙狀卡：
1
2016年1月1日
哈當厄爾，挪威
例
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
試試吧（文本卡）» 試用（圖像卡）» 自測練習用！
CSS3陰影屬性
下表列出了CSS3陰影屬性：
| 屬性 | 描述 |
|---|---|
| box-shadow | 添加一個或多個陰影元素 |
| text-shadow | 添加一個或多個陰影文本 |