下面就說說如何使用css3的陰影屬性。
css3陰影主要用到了box-shadow屬性，該屬性的文法格式如下：
box-shadow: <horizontal> <vertical> <blur> <color>
以上各屬性值的意思如下：
horizontal（水平）：指定水平位移陰影。正值（即：5px）陰影向右，而為負值（即：- 10px）將使它偏向左。
vertical（垂直）：指定垂直位移陰影。正值（即：5px）會使陰影在框的底部，而負值（即：- 10px）將使它偏向上。
blur(模糊)：設定的柔化半徑。預設值為0，這意味著沒有模糊。正值增加了模糊，而負值，實際上縮小了陰影。此屬性預設為0。
clolor(顏色)：顏色值,也就是設定陰影顏色。
提醒：該屬性可以加在任意元素上，片，Div，SPAN，P標籤等等都可以。
下面看一個具體的陰影樣本，如下是效果樣本圖和具體的代碼：
<html xmlns="http://www.phpernote.com/"><head><title>CSS3陰影製作效果執行個體</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#shadow {box-shadow: 10px 10px 5px #888888;width:500px;padding:5px;text-align:center;font-size:20px;background:#21759b;margin:0 auto;color:#ffffff;}</style></head><body><div id="shadow">矩形的 CSS3 的陰影</div></body></html>
以上這個關於css3的簡單的小教程，希望能協助到大家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
