在CSS3中,
<img>元素有了更多的樣式設(shè)置。
CSS3可以讓我們對圖片進(jìn)行更為精細(xì)的控制和美化,其中包括:
1. 調(diào)整圖片的大小和位置
img { width: 300px; height: 200px; margin: 10px; }
使用width
和height
屬性可以調(diào)整圖片的大小,margin
屬性可以調(diào)整圖片與周圍元素的間距。
2. 給圖片加邊框
img { border: 1px solid black; }
使用border
屬性可以給圖片添加邊框。
3. 裁剪圖片
img { clip: rect(0, 150px, 150px, 0); }
使用clip
屬性可以裁剪圖片。
4. 調(diào)整圖片透明度
img { opacity: 0.5; }
使用opacity
屬性可以調(diào)整圖片的透明度。
5. 調(diào)整圖片的濾鏡和效果
img { filter: grayscale(100%); }
使用filter
屬性可以給圖片添加濾鏡和效果。
總之,CSS3讓我們可以更好地控制和美化圖片,讓網(wǎng)頁更加豐富多彩。
上一篇css3兩行顯示