Img元素是HTML中一個重要的標簽,用于插入圖片到網頁中。在使用Img元素的時候,除了可以指定圖片的路徑和大小外,還可以配合CSS屬性對圖片的樣式進行控制。
img {
display: block; /* 將圖片設置為塊級元素 */
margin: 0 auto; /* 居中顯示 */
border: 1px solid #ccc; /* 增加邊框 */
border-radius: 5px; /* 設置圓角 */
box-shadow: 1px 1px 5px #ccc; /* 增加陰影效果 */
}
上述代碼中,我們使用了display屬性將圖片設置為塊級元素,這樣圖片就可以像其它塊級元素一樣占據整行,而不會像內聯元素一樣緊貼在文字旁邊。然后通過margin和auto屬性實現圖片水平居中顯示。接著,使用border屬性添加了一個細邊框,并給邊框設置為灰色。通過border-radius屬性可以給圖片添加圓角效果。最后,我們使用box-shadow屬性添加了一個陰影效果,使圖片看起來更加立體。