HTML5 設置圓角 在web開發中，圓角效果是非常常見的一種UI設計。HTML5為我們提供了一種很簡單的方法來設置元素的圓角。下面我們來詳細了解一下如何使用HTML5來實現圓角效果。 1. 使用border-radius屬性 border-radius是HTML5中用來設置圓角效果的屬性，它可以設置一個元素的四個角的半徑大小。例如，如下代碼可以讓一個div元素的四個角都設置為20px的圓角效果。

div {
border-radius: 20px;
}

2. 設置不同角的圓角 有時候，我們需要設置不同角的圓角效果。border-radius屬性還可以接受四個值，分別指定四個角的半徑大小。例如，如下代碼可以讓一個div元素左上角和右下角設置為20px的圓角效果，右上角和左下角設置為0px的直角效果。

div {
border-radius: 20px 0 0 20px;
}

3. 圓角的精細控制 如果需要更精細的圓角控制，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius屬性來單獨控制每個角的半徑大小。例如，如下代碼可以讓一個div元素左上角設置為20px的圓角效果，右上角設置為10px的圓角效果，右下角設置為5px的圓角效果，左下角設置為0px的直角效果。

div {
border-top-left-radius: 20px;
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 0px;
}

總結 HTML5中的border-radius屬性可以很方便地實現圓角效果，可以設置一個或多個角的半徑大小，也可以單獨設置每個角的半徑大小。當然，還有更多的樣式可供自己去嘗試。