css3如何实现圆角边框( 二 ) _网页编纂器

}
.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部门：
<div id="box4">
<div class="div4">左上角为圆角</div>
<div class="div5">右上角为圆角</div>
<div class="div6">右下角为圆角</div>
<div class="div7">左下角为圆角</div>
</div>
结果如图：

5注重，上面例子中，每句圆角边框代码都要零丁编写兼容代码。
兼容性代码要如许写：
.div4{
border-top-left-radius: 40px;
-moz-border-top-left-radius: 40px;
-webkit-border-top-left-radius: 40px;
}
如图，图顶用的是Chrome浏览器
【css3如何实现圆角边框】今朝，ie9+撑持border-radius属性，Firefox、Chrome、Safari撑持所有新的边框属性

注重事项百分比年夜于50%后，外形就不会再转变了，圆角的半径不克不及跨越宽/高的一半
今朝，ie9+撑持border-radius属性，Firefox、Chrome、Safari撑持所有新的边框属性
但愿小编分享的原创经验对好伙伴们有所帮忙，若是小伙伴们有对本经验有任何疑问，请鄙人方评论处留言会商，小编第一时候来解答！

以上内容就是css3如何实现圆角边框的内容啦，希望对你有所帮助哦！

css3如何实现圆角边框( 二 )

猜你喜欢