首页 > 代码库 > 初步学习border-radius
初步学习border-radius
1.属性解析
border-radius是css3属性,他可以使div的角进行一定程度的弯曲。
比如说下面这个width和height的正方形div
经过设置border-radius之后四个角会出现弯曲
border-radius:40px;
当然我们可以针对某个角进行单独的设置
border-top-left-radius:40px;border-top-right-radius:40px;border-bottom-right-radius:40px;border-bottom-left-radius:40px;
2.使用场景
而在网页开发中,我们会遇到很多种需要使用圆形图案的情况,比如说做个圆形的头像图案
做个进度统计
上面这些情况都需要用到border-radius这个属性去弯曲边框。
3.初探border-radius
那我们该如何生成一个原型呢,原理是把边角弯曲成一条圆弧,在这里我们只需把border-radius大小设置为div(正方形)高的一半就好了,所以我们一般设置
border-radius:50%;
就可以实现圆型的图案。
在刚刚div的基础上增加border-radius:50%;就可以实现如下图案
初步学习border-radius
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。