27-圆角

圆角

• 盒子四个角默认为直角，可以通过属性设置变成圆角效果

  1.单独设置border-top-left-radius: 40px;border-top-right-radius: 50px;border-bottom-right-radius: 60px;border-bottom-left-radius: 70px;2.复合属性设置一个值：左上右上右下左下border-radius: 50px;两个值：左上右下   右上左下 border-radius: 40px 80px;三个值：左上   右上左下   右下border-radius: 20px 40px 80px;四个值：左上  右上  右下  左下border-radius: 20px 40px 80px 120px;八个值：左上  右上  右下  左下/左上  右上  右下  左下        水平方向半径       /  垂直方向半径 border-radius: 80px 40px 80px 120px/120px 40px 80px 120px;
  

• 圆角绘制原理：

  

• 圆角应用：

  • 绘制正圆形：首先盒子宽高一致，然后border-radius: 50%
  • 绘制胶囊形：首先盒子宽高不一致，然后border-radius: 高度一半

• 内半径和外半径

  • 当盒子边框足够宽时，设置的`border-radius小于或等于盒子边框宽度时，只有外边缘有圆角效果，内边缘没有圆角效果
  • 当盒子的边框足够宽时，设置的border-radius的值大于边框宽度，内边缘和外边缘都为圆角效果
  • 外半径 = border-radius
  • 内半径 = border-radius - 盒子边框