CSS3提供了許多強大的樣式,其中之一就是立體感的效果。通過CSS3,我們可以讓網頁中的圖片看起來更加真實、立體、豐富。
img{ -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5); -webkit-transform: perspective(70px) rotateY(20deg); -moz-transform: perspective(70px) rotateY(20deg); transform: perspective(70px) rotateY(20deg); }
以上代碼使用了CSS3的box-shadow屬性和transform屬性。
box-shadow屬性使圖片有了類似于描邊的效果,通過調整參數的數值,我們可以自由地控制描邊的顏色、位置和虛實程度。
transform屬性則可以對圖片進行3D轉換。在以上代碼中,我們使用了rotateY函數,使圖片在Y軸上旋轉。同時,我們將perspective設為70px,表示將物體放在距離用戶視點70像素的位置,從而使圖片看起來更加立體。
通過以上的樣式設置,我們就可以讓平面的圖片看起來更加立體、真實。