CSS3 圆角

1.基本使用

• 相关属性：使用 "border-radius" 属性来控制圆角的大小，默认值为0，即没有圆角
• 属性值：可以设定具体的像素值，也可以是百分比

.box {
    width: 300px;
    height: 300px;
    background-color: #336699;
    /* border-radius: 50%; */
    /* 等价于 */
    border-radius: 150px;
}

• order-radius 属性是一个简写属性（4合1，一个容器共有4个角），只写一个值，相当于同时设定4个角

属性	说明
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-right-radius	右下脚
border-bottom-left-radius	左下角

border-radius:10px;
//等价于
border-radius:10px 10px 10px 10px;
//等价于
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;

• 圆角属性值的顺序：依次对应的是，左上-右上-右下-左下，顺时针方向

border-radius:20px 40px 60px 80px;

//等价于

border-top-left-radius:20px;
border-top-right-radius:40px;
border-bottom-right-radius:60px;
border-bottom-left-radius:80px;

2.长轴和短轴

• 我们前面设置的圆角所形成的圆弧实际上是一个正圆，因为这个圆弧的长轴和短轴刚好相等，如图
  

border-radius:150px;
等价于
border-radius:150px / 150px
等价于
border-radius:150px 150px 150px 150px / 150px 150px 150px 150px

• 如果要设置长轴和短轴不相等，就需要另外一种写法：A / B 中A决定椭圆水平轴的大小，而B决定椭圆竖直轴的大小

border-radius:A / B
//示例
border-radius:80px / 150px

两种写法对比图：

border-radius:80px / 150px
//对比
border-radius:150px / 150px