CSS em、rem+圆角篇

em和rem

• px单位： html的尺寸单位

• em和rem 也是html里的尺寸单位， em和rem的计算是相对于px的， 最终会被换算成px

• em: 一个em单位指的是当前元素的font-size值

  rem: 一个rem单位指的是根元素（html元素的）font-size， 与其他元素没有关系

• font-size指的是当前元素的文字大小

  注意： 一个元素的font-size值是会被继承的。（子元素如果不设置font-size， 其font-size继承于父元素）

• 注意事项:

  em在计算的时候， 如果当前元素没有设置font-size， 那么我们还要去搞清楚其父级的font-size是多少， 但是如果我们发现父级也没有设置font-size， 那么只有继续往上找

圆角

• 圆角 border-radius

• 单独设置某个较的圆角值

  可以填 一个值

  ​ 表示水平与竖直的值相同

  可以填 两个值

  ​ 第一个值表示水平方向的值， 第二个值表示竖直方向的值

  
  border-top-left-radius: 20px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 50px;
  
  

• 合写

  可以填一个值

  ​ 四个角的水平和竖直所有值相同

  可以填二个值

  ​ 一个值表示左上角+右下角的水平和竖直的值

  ​ 第二个值表示右上角+左下角的水平和竖直的值

  可以填三个值

  ​ 第一个值表示左上角的水平和竖直的值

  ​ 第二个值表示右上角+左下角的水平和竖直的值

  ​ 第三个值表示右下角的水平和竖直的值

  可以填四个值

  ​ 第一个值表示左上角的水平和竖直的值

  ​ 第二个值表示右上角的水平和竖直的值

  ​ 第三个值表示右下角的水平和竖直的值

  ​ 第三个值表示左下角的水平和竖直的值

• 如果想要用合写的办法设置每个角且每个角的水平和竖直的值不同

  先按照需求写水平方向的所有角的值， 再写竖直方向的所有角的值， 中间用/分开

  
  
  border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
  
  border-radius: 20px / 30px;
  
  border-radius: 10px 30px / 20px 40px;
  
  

• 圆角还支持百分比， 百分比相对的是 水平方向相对与width， 竖直方向相对height