CSS样式-border-radius圆形边框基本⽤法主要通过属性border-radius，您能够创建圆⾓边框，正圆边框和椭圆边框，使⽤图⽚来绘制边框。
圆⾓边框（border-radius）的基本⽤法：
圆⾓边框的最基本⽤法就是设置四个相同弧度的圆⾓，其样式如下：
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px;
}
html部分：
<div>
四个圆⾓相等的圆⾓矩形
</div>
其效果如下：
如果将值设为50%，则实现正圆形，其效果如下：
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius:50%;
}
html部分：
<div>
正圆形
</div>
（注：正圆只能实现在四边相等的条件下如不等则实现为椭圆形）
如果输⼊两个值实现值的位置顺序为：值1（左上右下）值2（左下右上）
css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px 100px;
}
html部分：
<div>
输⼊两个值实现值的位置顺序
</div>
其效果如下：
div border属性
如果输⼊三个值实现值的位置顺序为：值1（左上）值2（左下右上）值3（右下）css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px 100px 50px;
}
html部分：
<div>
输⼊四个值实现值的位置顺序
</div>
其效果如下：
如果输⼊四个值实现值的位置顺序为：值1（左上）值2（右上）值3（右下）值4 （左下）css部分：
div{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 20px 100px 50px 50px;
}
html部分：
<div>
输⼊四个值实现值的位置顺序
</div>
其效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。