当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 | .box 2 {
width : 200px ;
height : 300px ;
margin : 30px auto ;
border : 2px solid #e4007e ;
text-align : center ;
line-height : 200px ;
font-weight : bold ;
font-size : 24px ;
background : burlywood;
border-radius: 100px / 150px ;
}
|
效果如图:

方法4:
设置不同弧度的圆角
例子:
css部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #box 4 {
width : 500px ;
position : relative ;
margin : 30px auto ;
}
.div 4 ,.div 5 ,.div 6 ,.div 7 {
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 ;
}
.div 4 {border-top-left-radius: 40px ;}
.div 5 {border-top-right-radius: 20px ;}
.div 6 {border-bottom-left-radius: 30px ;}
.div 7 {border-bottom-right-radius: 10px ;}
|
效果如图:

注意事项
百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半。
【推荐学习:css视频教程】
以上就是css如何设置圆角的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css如何设置超出部分滚动条隐藏
a标签怎么去掉下划线
css如何让盒子浮动
css animation-duration属性怎么用
怎样在css中解决长英文单词的页面显示问题?
css3二级导航菜单制作步骤详解
css 怎么可以不继承样式
none在css中表示什么意思
为什么使用div+css布局?
html与css中2d转换模块
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何设置圆角