border-radius学习笔记（借鉴阮一峰老师）

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

border-radius学习笔记（借鉴阮一峰老师）

推荐阅读更多精彩内容