border-radius 是一个简写属性。以下这三种写法等效:

  • border-radius: 50%;
  • border-radius: 50% / 50%;
  • border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;

它分别指定了盒模型四个角的四个内切椭圆的 rx 和 ry。

box-raduis 最终的结果就是这四个内切椭圆box-content 的一个裁切效果。

看到下面的这个面具和微笑大脸了吗?你所看到的全部形状,都只用了 border-radius,神奇不神奇美妙不美妙?看代码~


224 0 0