站長資訊網(wǎng)
設(shè)置方法：1、使用“box-shadow: 水平陰影 垂直陰影 blur spread color inset;”語句；2、使用“filter:drop-shadow(水平陰影 垂直陰影 blur spread color)”語句。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css中設(shè)置圖片陰影有兩種方法：
-
box-shadow屬性
-
filter:drop-shadow()
下面給大家介紹一下
1、使用box-shadow屬性
box-shadow 屬性向框添加一個(gè)或多個(gè)陰影。
語法：box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow 必需。水平陰影的位置。允許負(fù)值。
-
v-shadow 必需。垂直陰影的位置。允許負(fù)值。
-
blur 可選。模糊距離。
-
spread 可選。陰影的尺寸。
-
color 可選。陰影的顏色。請參閱 CSS 顏色值。
-
inset 可選。將外部陰影 (outset) 改為內(nèi)部陰影。
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> img { box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); /*考慮瀏覽器兼容性*/ -moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); } </style> </head> <body> <img src="img/1.jpg" width="200" /> </body> </html>
2、使用filter:drop-shadow()
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
drop-shadow()可給圖像設(shè)置一個(gè)陰影效果。陰影是合成在圖像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。
語法：filter:drop-shadow(h-shadow v-shadow blur spread color);
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> img { -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); /*考慮瀏覽器兼容性：兼容 Chrome, Safari, Opera */ filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5)); } </style> </head> <body> <img src="img/1.jpg" width="200" /> </body> </html>
（學(xué)習(xí)視頻分享：css視頻教程）
