CSS 中可以通過 border 屬性為圖片設置框線,實現美化的效果。
img { border: 2px solid black; }
上述代碼表示為所有的 img 元素添加一個 2 像素寬的黑色實線邊框。
如果想要實現虛線或者點狀的邊框,可以設置 border-style 屬性:
img { border: 2px dotted red; }
上述代碼表示為 img 元素添加一個 2 像素寬的紅色點式邊框。
當然,也可以只設置部分邊框的樣式。
img { border-top: 2px solid blue; border-bottom: 2px dashed green; }
上述代碼表示為 img 元素添加一個頂部寬為 2 像素的實線藍色邊框,底部寬為 2 像素的點狀綠色邊框。
通過 border-radius 屬性還可以為圖片添加圓角效果:
img { border: 2px solid pink; border-radius: 10px; }
上述代碼表示為 img 元素添加一個 2 像素寬的粉色實線邊框,并設置 10 像素的圓角效果。
有了以上的 CSS 技巧,我們可以為圖片添加漂亮的框線,增加頁面的美觀度。