CSS中的image圓角是指將圖片的角度變為圓角,讓圖片更加美觀。在CSS中,可以通過屬性border-radius來實現圖片的圓角處理。border-radius屬性可以指定四個角的圓角大小,也可以同時指定兩個相鄰角的圓角大小。在沒有指定特定尺寸的情況下,圓角的大小與邊框的總寬度成比例。
img{ border-radius: 50%; /*或者使用以下代碼來同時指定不同的圓角大小*/ border-top-right-radius: 20px; border-bottom-right-radius: 5px; border-bottom-left-radius: 50%; border-top-left-radius: 10%; }
其中border-radius:50%可以將矩形的四個角變成圓角。當radius的值等于50%時,元素將變成一個圓形。如果只想將某一個角變成圓角,可以使用以下代碼:
img{ border-top-left-radius: 10px; }
這樣,只有左上角的半徑會被變為10px的圓角。
當然,除了img標簽可以應用border-radius屬性以外,其他幾乎所有元素都可以使用它,如div、span等。這種技能也是每個Web前端開發工程師都需要掌握的基本技能之一。
上一篇css img 適配
下一篇css3實現3d導航