微信小程序界面设计CSS3在小程序中样式精通课程-第1课-边框-border-radius圆角边框

border-radius: 1-4 length|% / 1-4 length|%;

border-radius:2em;

border-top-left-radius:2em;

border-top-right-radius:2em;

border-bottom-right-radius:2em;

border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;

border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;

border-bottom-right-radius: 4em 0.5em;

border-bottom-left-radius: 1em 3em;

<view class='c01'>圆角边框</view>

<view class='c02'>左上圆角</view>

<view class='c03'>右上圆角</view>

<view class='c04'>左下圆角</view>

<view class='c05'>右下圆角</view>

.c01{

  margin: 10px;

  padding: 10px;

  background-color:  gainsboro;

  border-radius: 10px;

}

.c02{

  margin: 10px;

  padding: 10px;

  background-color:  gainsboro;

  border-top-left-radius: 10px

}

.c03{

  margin: 10px;

  padding: 10px;

  background-color:  gainsboro;

  border-top-right-radius: 10px;

}

.c04{

  margin: 10px;

  padding: 10px;

  background-color:  gainsboro;

  border-bottom-left-radius: 10px;

}

.c05{

  margin: 10px;

  padding: 10px;

  background-color:  gainsboro;

  border-bottom-right-radius: 10px;

}