在網(wǎng)頁設計中,加上黑框的圖片常常能夠使得頁面更加美觀和具有視覺沖擊力。那么如何使用CSS來為圖片添加黑框呢?
首先,在HTML中插入要添加黑框的圖片。例如:
<img src="example.jpg" alt="Example Image">
接下來,在CSS中使用以下代碼來添加黑框:p img{
border: 5px solid #000;
}
在上述代碼中,p img
選擇器用于選中HTML中的所有圖片,border
屬性指定了黑框的厚度(5像素)和顏色(黑色,用#000來表示)。
如果你只想讓特定的圖片添加黑框,可以為該圖片設置一個類名,然后在CSS中以類名的形式來選中該圖片。例如:
HTML代碼如下:<img src="example.jpg" alt="Example Image" class="black-border">
CSS代碼如下:img.black-border{
border: 5px solid #000;
}
在上述代碼中,img.black-border
選擇器用于選中所有具有black-border
類名的圖片,并為它們添加黑框。
總之,為網(wǎng)頁中的圖片添加黑框只需要使用簡單的CSS代碼即可。無論是為整個頁面還是為特定的圖片添加黑框,都可以通過CSS輕松實現(xiàn)。下一篇圖片加鏈接css樣式