CSS3的box-shadow屬性可以讓我們輕松實(shí)現(xiàn)圖層陰影效果。我們來(lái)實(shí)戰(zhàn)詳解一下這個(gè)屬性。
先來(lái)看一個(gè)這個(gè)屬性的瀏覽器兼容性:
box-shadow有六個(gè)可設(shè)值:
img{box-shadow:陰影類(lèi)型 X軸位移 Y軸位移 陰影大小 陰影擴(kuò)展 陰影顏色 }
讓我們通過(guò)幾個(gè)實(shí)例來(lái)看一個(gè)box-shadow的效果，先弄個(gè)簡(jiǎn)單的html供測(cè)試：
<html>
<head>
<style type="text/css">CSS部份寫(xiě)在這里</style>
</head>
<body>
<img src="test.jpg" />
</body>
</html>
請(qǐng)注意:為了省事兒，下面的CSS代碼中只寫(xiě)了box-shadow，在實(shí)際使用中，你應(yīng)該把-moz-box-shadow和-webkit-shadow也寫(xiě)上。你需要做的很簡(jiǎn)，復(fù)制兩個(gè)box-shadow,在它們前面分別加上-moz-和-webkit-。
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
