色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 立體感的圖片

錢諍諍2年前12瀏覽0評論

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像素的位置,從而使圖片看起來更加立體。

通過以上的樣式設置,我們就可以讓平面的圖片看起來更加立體、真實。