盒子圆角边框
border-radius: length;
border-radius: 10px;
border-radius: 50%; //设置半径为宽度的一半
border-radius: 10px 20px 30px 40px; //顺时针设置四个角的圆半径
border-radius: 10px 20px; //设置左上右下为10px,右上左下为20px
border-top-left-radius: length; //单独设置左上角
border-top-right-radius: length; //单独设置右上角
border-bottom-left-radius: length; //单独设置左下角
border-bottom-right-radius: length; //单独设置右下角
圆角边框即使用四个圆放在矩形盒子的四个角,截取圆弧生成圆角边框,length即圆的半径,length越大,圆弧越明显。
若length为盒子宽度的一半且盒子为正方形,则会生成一个圆形盒子。若盒子为矩形,设置length为高度的一半则会生成圆弧矩形。