1）示例：四種寫(xiě)法

// html代碼
    <div class="border border01">圓角展示：border-radius設(shè)置一個(gè)值</div>
    <div class="border border02">圓角展示：border-radius設(shè)置兩個(gè)值</div>
    <div class="border border03">圓角展示：border-radius設(shè)置三個(gè)值</div>
    <div class="border border04">圓角展示：border-radius設(shè)置四個(gè)值</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 // 四個(gè)角都為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 // 逆時(shí)針，左上為0，右上為10px,右下為20px,左下為40px
    background #999

屏幕快照 2018-07-23 上午11.28.30.png

屏幕快照 2018-07-23 上午11.28.43.png

2）border-radius可以設(shè)置兩組值，第一組值表示水平半徑，第二組值表示垂直半徑，第二組值也可以同時(shí)設(shè)置1到4個(gè)值，應(yīng)用規(guī)則與第一組值相同。

.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）單獨(dú)設(shè)置每個(gè)圓角

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