HTML5中的圖片樣式代碼

在HTML5中，我們可以使用一些樣式代碼來美化圖片。下面我們來一起學習一些常用的圖片樣式代碼。

圖片居中顯示

<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="image.jpg" alt="美麗的風景" />

該樣式代碼使用了display屬性將圖片轉換成塊級元素，并設置左右的margin為auto，實現了圖片水平居中顯示的效果。

圖片圓角

<style>
img {
border-radius: 50%;
}
</style>
<img src="avatar.jpg" alt="頭像" />

該樣式代碼使用了border-radius屬性將圖片的邊角設置成了圓角，其中50%的值表示將圖片全部圓角化。

圖片濾鏡

<style>
img {
filter: grayscale(100%);
}
</style>
<img src="photo.jpg" alt="黑白照片" />

該樣式代碼使用了filter屬性將圖片的顏色進行了轉換，grayscale(100%)表示將圖片轉換成灰度圖像，實現了黑白照片的效果。

圖片透明度

<style>
img {
opacity: 0.5;
}
</style>
<img src="sunrise.jpg" alt="日出" />

該樣式代碼使用了opacity屬性將圖片的透明度設置成了50%，實現了圖片半透明的效果。

除了上述常用的圖片樣式代碼外，HTML5中還有很多其他的樣式代碼可以進行圖片美化，大家可以嘗試自己編寫代碼，實現不同的效果。