CSS3為我們提供了許多許多美妙的效果,其中就包括了對于圖片邊緣的處理。
我們可以使用border-radius屬性來為圖片添加圓角。
img { border-radius:50%; }
上述代碼將會為圖片添加一個圓形的邊緣。我們也可以改變border-radius的值來隨意定制圖片的圓角弧度。例如,下面的代碼會使圖片的四個角都呈現出3px弧度的圓角:
img { border-radius:3px; }
除了使用border-radius之外,我們還可以使用box-shadow屬性為圖片添加邊框的陰影效果。下面的代碼將會為圖片添加一個寬度為4像素、顏色為#ddd的灰色邊框。
img { box-shadow:0 0 0 4px #ddd; }
當然,我們也可以為圖片添加多層邊框的效果。下面的代碼將會為圖片添加一個寬度為4像素、顏色為#ddd的灰色邊框,以及一個2像素寬度、顏色為#333的黑色邊框:
img { box-shadow: 0 0 0 4px #ddd, 0 0 0 2px #333; }
這樣,我們就可以很簡單地增強圖片的美感,讓網站更具視覺沖擊力。
上一篇css3 偶數奇數
下一篇php crypto加密