首页 > 代码库 > 初步学习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