在CSS中，可以通过圆角边框border-radius属性来画圆角矩形。border-radius属性允许为元素添加圆角边框效果。
圆角边框是css3新增属性，在圆角边框出现之前，前端开发有的采用整块的圆角图片作为背景，有的采用小的圆角图片分别放在元素的四角，非常麻烦。
圆角边框border-radius属性的基本用法：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
语法：
border-radius: 1-4 length| 1-4 length|
属性值：
length：定义圆角的形状。/code>：以百分比定义圆角的形状。
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。
圆角边框的最基本用法就是设置四个相同弧度的圆角
boder-top-left-radius：30px； //左上角 boder-top-right-radius：30px； //右上角 boder-bottom-left-radius：30px； //右下角 boder-bottom-right-radius：30px； //左下角
如果这四个弧度的圆角相同，可以写成：
border-radius：30px；
示例：画圆角矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
margin:0 auto;
background: pink;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>圆角矩形</div>
</body>
</html>效果图：
以上就是css怎么画圆角矩形？的详细内容，更多请关注易知道|edz.cc其它相关文章！
