小程序中圆角边框的设置

与CSS一样，小程序中的圆角可以通过border-radius来设置。
以input为例，想要设置圆角边框，只需加上如下样式：

 border-radius: 5px

即可实现如下效果：

不同的是，在小程序中想要设置仅其中某个圆角，而其它为直角，则需要使用 border-bottom-left-radius， border-top-left-radius， border-bottom-left-radius， border-top-left-radius单独设置，使用类似于CSS中的直接在border-radius属性中写四个值，如： border-radius: 5px,0px,0px,5px; 则没有效果

以下是设置左半边为圆角，右半边为直角的情况：

 border-bottom-left-radius: 5px;
 border-top-left-radius: 5px;

另外，小程序中按钮button是自带圆角的，

因此如果想设置仅一半显示圆角，需如下设置：

 border-radius: 0px;
 border-bottom-right-radius: 5px;
 border-top-right-radius: 5px;

效果如下：

据此我们可以生成一个带圆角边框的搜索栏：

wxml

   <view class="search-cell">
      <view class="weui-cell__bd">
        <input class="input-search" placeholder=""  value="{{inputVal}}"/>
      </view>
      <view class="weui-cell__ft">
        <button class="btn-search" type="primary" >搜索</button>
      </view>
    </view>

wxss

.btn-search {
  border-radius: 0px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 13px;
  font-family: "微软雅黑";
}
.input-search {
  border: lightgrey;
  border-style: solid;
  border-width: 1px;
  font-size: 14px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  height: 31px;
  padding-left: 10px;
}
.search-cell {
  margin-top: 30px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

当然对于本身不带边框的组件，如label，view等，注意要配合border属性使用才能显示出圆角边框的效果。