html圆角矩形怎么画
时间: 2023-10-09 10:12:02 浏览: 76
可以使用CSS的`border-radius`属性来实现HTML圆角矩形的绘制。
例如,下面的代码将创建一个具有10像素圆角的红色矩形:
```html
<div style="background-color: red; border-radius: 10px; width: 100px; height: 100px;"></div>
```
也可以将`border-radius`属性设置为百分比,以创建不同角度的圆角矩形。
例如,下面的代码将创建一个具有50%圆角的矩形,看起来像一个正圆:
```html
<div style="background-color: blue; border-radius: 50%; width: 100px; height: 100px;"></div>
```
你也可以使用`border-top-left-radius`、`border-top-right-radius`、`border-bottom-left-radius`和`border-bottom-right-radius`属性来设置每个角上的不同圆角半径。
例如,下面的代码将创建一个左上角和右下角为20像素圆角,右上角和左下角为10像素圆角的矩形:
```html
<div style="background-color: green; border-top-left-radius: 20px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 20px; width: 100px; height: 100px;"></div>
```