与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属性使用才能显示出圆角边框的效果。