CSS3的圓弧角是讓頁面變得更加美觀,它是通過使用border-radius屬性來實現的。該屬性可以讓我們輕松地將頁面元素的角變成圓形,橢圓形或者其他形狀
border-radius: 10px; // 將四個角都變成圓角 border-top-left-radius: 10px; // 只將左上角變成圓角 border-bottom-right-radius: 15px; // 只將右下角變成圓角 border-radius: 20px 10px; // 分別給左上、右上、右下、左下四個角賦予不同的值 border-radius: 50% 50% 0 0; // 將左上、右上角變成圓形
如果我們想要把元素的邊框變成反向的圓角,可以使用下面的樣式
border-radius: 50% / 25%; // 可以將左右反轉的圓角實現
以上就是關于CSS3圓弧角的簡單介紹,希望可以對你的開發工作有所幫助
上一篇css3 圓裁剪 動畫
下一篇css3 圖片邊距