css怎么画圆角矩形?下面本篇文章就来给大家介绍一下使用css画圆角矩形的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
在CSS中,可以通过圆角边框border-radius属性来画圆角矩形。border-radius属性允许为元素添加圆角边框效果。
圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦。
圆角边框border-radius属性的基本用法:
border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。
语法:border-radius: 1-4 length|% / 1-4 length|%;
属性值:length:定义圆角的形状。
%:以百分比定义圆角的形状。
注释:按此顺序设置每个 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;
示例:画圆角矩形
div{
margin:0 auto;
background: pink;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
圆角矩形
效果图: