圆角边框是css3新增属性,在圆角边框出现之前,前端开发有的采用整块的圆角图片作为背景,有的采用小的圆角图片分别放在元素的四角,非常麻烦,下面我们来看一下如何使用css设置圆角边框。
圆角边框(border-radius)的基本用法:
圆角边框的最基本用法就是设置四个相同弧度的圆角boder-top-left-radius:30px; //左上角boder-top-right-radius:30px; //右上角boder-bottom-left-radius:30px; //右下角boder-bottom-right-radius:30px; //左下角
如果这四个弧度的圆角相同,可以写成:border-radius:30px;
css设置圆角边框:
css部分:.div1{
margin:0 auto;
background: darkcyan;
width:200px;
height:200px;
border:2px solid darkslategray;
border-radius:30px;
text-align: center;
line-height: 200px;
}
html部分:
圆角边框
效果如图:
设置不同弧度的圆角
例子:
css部分:#box4{
width:500px;
position: relative;
margin:30px auto;
}
.div4,.div5,.div6,.div7{
width:200px;
height:200px;
text-align: center;
color:seagreen;
font-size: 26px;
line-height: 200px;
background: yellowgreen;
border:2px solid darkslategray;
float:left;
margin:20px;
}
.div4{border-top-left-radius: 40px;}
.div5{border-top-right-radius: 20px;}
.div6{border-bottom-left-radius: 30px;}
.div7{border-bottom-right-radius: 10px;}
HTML部分:
左上角为圆角右上角为圆角右下角为圆角左下角为圆角
效果如图:
如果觉得《html5文本框设置圆角 css如何设置圆角边框?》对你有帮助,请点赞、收藏,并留下你的观点哦!