如何使用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>文本陰影效果!</h1>
<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個字
最新活動更多
-
即日-10.29立即報名>> 2024德州儀器嵌入式技術(shù)創(chuàng)新發(fā)展研討會
-
10月31日立即下載>> 【限時免費下載】TE暖通空調(diào)系統(tǒng)高效可靠的組件解決方案
-
即日-11.13立即報名>>> 【在線會議】多物理場仿真助跑新能源汽車
-
11月14日立即報名>> 2024工程師系列—工業(yè)電子技術(shù)在線會議
-
12月19日立即報名>> 【線下會議】OFweek 2024(第九屆)物聯(lián)網(wǎng)產(chǎn)業(yè)大會
-
即日-12.26火熱報名中>> OFweek2024中國智造CIO在線峰會
推薦專題
- 1 Intel宣布40年來最重大轉(zhuǎn)型:年底前裁員15000人、拋掉2/3房產(chǎn)
- 2 因美封殺TikTok,字節(jié)股價骨折!估值僅Meta1/5
- 3 宏山激光重磅發(fā)布行業(yè)解決方案,助力智能制造產(chǎn)業(yè)新飛躍
- 4 國產(chǎn)AI芯片公司破產(chǎn)!白菜價拍賣
- 5 具身智能火了,但規(guī)模落地還需時間
- 6 國產(chǎn)英偉達們,抓緊沖刺A股
- 7 三次錯失風(fēng)口!OpenAI前員工殺回AI編程賽道,老東家捧金相助
- 8 英特爾賦能智慧醫(yī)療,共創(chuàng)數(shù)字化未來
- 9 英偉達的麻煩在后頭?
- 10 將“網(wǎng)紅”變成“商品”,AI“爆改”實力拉滿
- 高級軟件工程師 廣東省/深圳市
- 自動化高級工程師 廣東省/深圳市
- 光器件研發(fā)工程師 福建省/福州市
- 銷售總監(jiān)(光器件) 北京市/海淀區(qū)
- 激光器高級銷售經(jīng)理 上海市/虹口區(qū)
- 光器件物理工程師 北京市/海淀區(qū)
- 激光研發(fā)工程師 北京市/昌平區(qū)
- 技術(shù)專家 廣東省/江門市
- 封裝工程師 北京市/海淀區(qū)
- 結(jié)構(gòu)工程師 廣東省/深圳市