1）示例：四种写法
// html代码
<div class="border border01">圆角展示：border-radius设置一个值</div>
<div class="border border02">圆角展示：border-radius设置两个值</div>
<div class="border border03">圆角展示：border-radius设置三个值</div>
<div class="border border04">圆角展示：border-radius设置四个值</div>
// css代码
#app
display flex // 元素为flex布局
flex-direction column // 元素竖直排列
align-items center // 元素水平居中
.border
margin-bottom 20px
width 200px
height 200px
text-align center
.border01
border-radius 10px // 四个角都为10px
background #333
.border02
border-radius 0px 20px // 左上和右下为0，右上和左下为20px
background #666
.border03
border-radius 0px 20px 40px // 左上为0，右上和左下为20px,右下为40px
background #222
.border04
border-radius 0px 10px 20px 40px // 逆时针，左上为0，右上为10px,右下为20px,左下为40px
background #999
屏幕快照 2018-07-23 上午11.28.30.png
屏幕快照 2018-07-23 上午11.28.43.png
2）border-radius可以设置两组值，第一组值表示水平半径，第二组值表示垂直半径，第二组值也可以同时设置1到4个值，应用规则与第一组值相同。
.border04
border-radius 0px 10px 20px 40px / 10px 20px 30px 40px // 左上为0，右上为10px,右下为20px,左下为40px
background #999
屏幕快照 2018-07-23 上午11.36.44.png
3）单独设置每个圆角
border-top-left-radius // 左上
border-top-right-radius //右上
border-bottom-right-radius //右下
border-bottom-left-radius //左下
4）border的其它属性
border-color: black; // border颜色
border-style: solid dashed; // border样式
border-width: 1px 2px 3px; // border宽度
border-top-color: red; // border上边颜色
border-radius: 5%; // border圆角半径
屏幕快照 2018-07-23 上午11.44.38.png
