本篇内容主要讲解“css怎么让div成圆的”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么让div成圆的”吧!
在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怎么让div成圆的”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。