圆角边框
div{
border-radius: 10px;
/*半径参数可以为像素值或百分比*/
}
圆形
由正方形,将数值修改为高度或宽度的一半即可,或者直接写50%
round {
width: 200px;
height: 200px;
border-radius: 100px;
}
round {
width: 200px;
height: 200px;
border-radius: 50%;
}
圆角矩阵
如果是矩形,设置高度的一半即可
re {
width: 400px;
height: 200px;
border-radius: 100px;
}
简写
re {
width: 200px;
height: 200px;
border-radius: 10px 20px 30px 40px;
/*顺时针,左上角,右上角,右下角,左下角*/
}
re {
width: 200px;
height: 200px;
border-radius: 10px 20px ;
/*对角,左上角右下角为10px,右上角左下角为20px*/
}
分开写
re {
width: 200px;
height: 200px;
border-top-left-radius: 10px ;
border-top-right-radius: 10px ;
border-bottom-left-radius: 10px ;
border-bottom-right-radius: 10px ;
}