css圆角属性

1.基础

border-radius:;
px 或者百分比
​
写一个值：四个角都一样
写两个值：左上角和右下角，左下角右上角  一致
写三个值：左上，左下右上，右下
写四个值：顺时针方向，从左上角开始
​
border-top-left-radius:10px;  左上角
border-top-right-radius:10px; 右上角
border-bottom-left-radius:;   左下角
border-bottom-right-radius:;  右下角
​
border-垂直方向-水平方向-radius:;
先写垂直方向，在写水平方向

2.进阶

border-radius:30px/60px;
水平方向走30px，垂直方向走60px
水平/垂直
只支持border-radius:;写法
例：
border-radius:10px 20px 30px 40px/50px 60px 70px 80px;
                   水平方向             垂直方向

圆形写法
border-radius:盒子宽度的一半px;  会受到边框和内间距的影响
border-radius:50%;   盒子四边长度一样只要大于一半就会是圆

特殊形状
半圆
需要长方形，宽度是高度的两倍,只设置两个点
例：border-radius:50px 50px 0px 0px;
    div宽度为100，高度为50时
​
扇形
需要正方体，只设置1个点
例：border-radius:200px 0 0 0;
    div宽度为200时