边框圆角Css

.box{
    background:grey;     //灰色背景
    height:50px;           //高500像素
    width:200px;            //宽200像素
    border-top-left-radius:15px;       //边框 左上 圆角15像素    4个圆角都是15像素
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;
    border-bottom-left-radius:15px;
}            

也可以这么写

.box{
    border-radius:15px;
}
或者这么写
.box{
   border-radius:15px 10px 15px 20px;
}

　　

 

设置规则：

　　一个值：四个圆角的值相同

　　两个值：第一个值为左上角与右下角，第二个值为右上角以左下角

　　三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角

　　四个值：第一个值为左上角，第二个值为右上角，第单个值为右下角，第四个值为左下角

　　

使用百分比：

.box{
    border-radius:50%;  
}

　　圆角半径分别是height和width的50%

 

椭圆圆角：

　　

.box{
   border-radius:50px/15px
}

　　第一个值为圆角的横轴半径，第二个值为圆角的纵轴半径

 

转载于:https://www.cnblogs.com/xiaowie/p/9810372.html