圆角的使用

圆角

• 作用：为元素添加圆角边框

• 单个边定义

  • 语法： border-*-radius

  • border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度

• 常用取值

  • px

  • 百分比

    • 分别相对于宽高计算（非内容）

  • 不允许负值

• 简写border-radius

  • 语法

    • 空格 隔开

      • 四个值：左上角、右上角、右下角、左下角 水平和垂直半径 三个值：左上角、右上角和左下角，右下角 两个值：左上角与右下角、右上角与左下角 一个值： 四个圆角值相同

    • ""隔开

      • 水平半径（1-4）/垂直半径（1-4）

      • 规则同上