当前第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如何设置段落缩进
html css怎么设置字体大小
css怎么设置变成小手
css实现自适应宽度的菜单(代码实例)
css全称
css怎么设置文字加粗
css如何设置li的样式
在css中字体加粗要怎么做?
css实现卡片式图片效果
css外部样式表怎么写
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何设置圆角