border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。4个角（顺时针方向，左上，右上，右下，左下），每个角都有两个半径，水平半径和垂直半径
border-radius：length/persentage；
1、简单用法
<view class="test1"></view>
<view class="test2"></view>
<view class="test3"></view>
.test1{
border-radius:20px;
width: 100px;
height: 100px;
background: pink
}
.test2{
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
width: 100px;
height: 100px;
background: pink
}
.test3{
border-top-left-radius:10px;
border-top-right-radius:30px;
border-bottom-right-radius:40px;
border-bottom-left-radius:50px;
width: 100px;
height: 100px;
background: pink
}
效果图如下：
2、每个圆角都设置2组值，既水平半径和垂直半径不相同
border-radius:50px/10px; 50px为水平半径，10px为垂直半径
.test4{
border-radius:50px/10px;
width: 100px;
height: 100px;
background: pink
}
.test5{
border-radius:10px/50px;
width: 100px;
height: 100px;
background: pink
}
.test6{
border-radius:30px/50px;
width: 100px;
height: 100px;
background: pink
}
效果图如下：
也可以针对每个圆角单独设置，比如画一个鸡蛋
.test7{
width: 100px;
height: 120px;
background: pink;
border-radius:60px 60px 60px 60px/100px 100px 60px 60px;
}
效果图如下：
3、css内凹圆角
工作中经常用用到，显示圆角的按钮图片这种是比较简单也常见的效果。如果要实现内凹的圆角形状还是比较复杂的，例如这种
大概实现思路如下：
- 一个外层div，设置宽高，设置相对定位。
- 4个小的div，在外层div里面，通过border-radius进行不同方法的圆角设置
- 为这些小块加上不同方位的边框，通过对象定位，分别定位到外层div的
<view class="wrap">
<view class="wrap_left_top"></view>
<view class="wrap_right_top"></view>
<view class="wrap_left_bottom"></view>
<view class="wrap_right_bottom"></view>
</view>
.wrap {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin-top: 100px;
margin-left: 100px;
}
.wrap_left_top, .wrap_right_top, .wrap_left_bottom, .wrap_right_bottom {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #fff;
z-index: 1;
background: pink;
}
.wrap_left_top {
top: -1px;
left: -1px;
border-radius: 0 0 40px 0;
border-bottom: 1px solid red;
border-right: 1px solid red;
}
.wrap_right_top {
top: -1px;
right: -1px;
border-radius: 0 0 0 40px;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
.wrap_left_bottom {
left: -1px;
bottom: -1px;
border-radius: 0 40px 0 0;
border-top: 1px solid red;
border-right: 1px solid red;
}
.wrap_right_bottom {
right: -1px;
bottom: -1px;
border-radius: 40px 0 0 0;
border-top: 1px solid red;
border-left: 1px solid red;
}
效果图如下：
最后，把4个小块的背景色去掉。就完成了
4、其他常用形状
/*圆圈*/
.other1{
width: 100px;
height: 100px;
background: pink;
border-radius: 50%;
}
/*半圆*/
.other2{
width:50px;
height: 100px;
background: pink;
border-radius: 50px 0 0 50px;
}
/*扇形*/
.other3{
width: 100px;
height: 100px;
background: pink;
border-radius: 100% 0 0 0;
}
/*花瓣 旋转一下也可以是水滴*/
.other4{
width: 100px;
height: 100px;
background: pink;
border-radius: 50% 50% 0 50%;
}
/*花瓣 旋转一下也可以是水滴*/
.other5{
width: 100px;
height: 100px;
background: pink;
border-radius: 50% 50% 0 50%;
transform:rotate(45deg);
}
效果图如下：
