如何使用CSS3為文本和元素實現(xiàn)添加陰影效果?
使用CSS3,你可以為文本和元素添加陰影。
一、瀏覽器支持
表中的數(shù)字指定完全支持該屬性的第一個瀏覽器版本。
數(shù)字后面的 -webkit- 或者 -moz- 使用時需要指定前綴。
屬性ChromeFirefoxSafariOperaIEtext-shadow4.010.03.54.09.5box-shadow10.0 4.0 -webkit-9.04.0 3.5 -moz-5.1 3.1 -webkit-10.5
二、CSS3 陰影的文字特效
CSS代碼:
<!DOCTYPE CSS><CSS lang="en"><head> <meta charset="UTF-8"> <title>項目</title></head><body> <h1>文本陰影效果。迹痟1>
<p><b>注意:</b> IE9和更早的版本, 不支持text-shadow屬性.</p></body></CSS>CSS3 文本陰影
CSS3 text-shadow 屬性應(yīng)用陰影到文本上.
在簡單的用法, 你可以在水平方向設(shè)置陰影(2px)和垂直方向設(shè)置陰影(2px):
h1 { text-shadow: 2px 2px;}
添加一個顏色到陰影:
h1 { text-shadow: 2px 2px red;}
顯示一個帶有黑色陰影的白色文本:
h1 { color: white; text-shadow: 2px 2px 4px #000000; }
下面的例子顯示了紅色霓虹燈的陰影:
h1 { text-shadow: 0 0 3px #FF0000; }
多重陰影
要在文本中添加多個陰影,可以添加逗號分隔的陰影列表。
下面的實例顯示了一個紅色和藍色的霓虹燈陰影:
h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #F00000;}
下面實例顯示了一個白色文本帶有黑色,藍色和深藍色陰影:
h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;}
三、box-shadow 屬性
CSS3 box-shadow 屬性應(yīng)用陰影到元素上.
在最簡單的用法中,只指定水平陰影和垂直陰影:
一個黃色的 <div> 元素使用一個黑色box-shadow
div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px; }
下一步,添加一個顏色到陰影,對陰影添加模糊效果:
一個黃色的 <div>元素帶模糊紅/灰 box-shadow。
div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px 5px grey; }
案例
添加陰影到 ::before 和 ::after 偽類中, 來創(chuàng)建一個有趣的效果。
<!DOCTYPE CSS><CSS lang="en"><head> <meta charset="UTF-8"> <title>項目</title> <style> #boxshadow { position: relative; -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5); -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); padding: 10px; background: white; }
Make the image fit the box #boxshadow img { width: 100%; border: 1px solid #8a4419; border-style: inset; }
#boxshadow::after { content: ''; position: absolute; z-index: -1; hide shadow behind image -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 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;CSS }</style></head><body> <div id="boxshadow"> <img src="img/fy_indexBg.jpg" alt="Norway" width="600" height="400"> </div></body></CSS>
四、總結(jié)
本文基于CSS基礎(chǔ),使用CSS語言。介紹了有關(guān)CSS陰影效果的應(yīng)用,從基礎(chǔ)的文本陰影入手, 對CSS常見的陰影表示效果都做了一一的講解。通過一個個實例的演示,實例運行的效果圖。希望能夠幫助你更好的學(xué)習(xí)CSS。

請輸入評論內(nèi)容...
請輸入評論/評論長度6~500個字
最新活動更多
-
7月22-29日立即報名>> 【線下論壇】第三屆安富利汽車生態(tài)圈峰會
-
7.30-8.1火熱報名中>> 全數(shù)會2025(第六屆)機器人及智能工廠展
-
7月31日免費預(yù)約>> OFweek 2025具身智能機器人產(chǎn)業(yè)技術(shù)創(chuàng)新應(yīng)用論壇
-
免費參會立即報名>> 7月30日- 8月1日 2025全數(shù)會工業(yè)芯片與傳感儀表展
-
即日-2025.8.1立即下載>> 《2024智能制造產(chǎn)業(yè)高端化、智能化、綠色化發(fā)展藍皮書》
-
8月5日立即報名>> 【在線會議】CAE優(yōu)化設(shè)計:醫(yī)療器械設(shè)計的應(yīng)用案例與方案解析
推薦專題