css如何让div成圆的
程序员文章站
2022-03-05 20:40:55
...
在css中,可以使用border-radius属性将div设置为圆的,只需要给div元素添加“border-radius:50%”样式即可。这个属性允许你为元素添加圆角边框,圆角的半径不能超过宽/高的一半。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
圆角边框可以使用百分比作为单位,比如:将一个正方形的圆角边框设置为50%,那么就会形成一个圆,不过使用百分比与像素并不能等效。
注意:百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半
例子:
css部分:
.box1{ width:200px; height:200px; margin: 30px auto; border: 2px solid #e4007e; text-align: center; line-height: 200px; font-weight: bold; font-size: 24px; background: burlywood; border-radius: 50%;//圆角百分比 }
html部分:
<div class="box1">这是一个圆</div>
效果如图:
推荐学习:css视频教程
以上就是css如何让div成圆的的详细内容,更多请关注其它相关文章!
下一篇: mac php导出excel乱码怎么办
推荐阅读
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
如何让整个div实现超链接(得用标签)_html/css_WEB-ITnose
-
HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中_html/css_WEB-ITnose
-
CSS如何让两列div并排显示_html/css_WEB-ITnose
-
div+css如何实现页脚的置底
-
HTML如何让IMG自动适应DIV容器大小的实现方法
-
css中absolute设置问题和如何让div居中
-
css让不同大小的图片适应div的大小,且不变形。
-
用CSS让DIV上下左右居中的方法
-
如何让浮动的元素换行??css