文章来自于：http://blog.csdn.net/beilinyu/article/details/54291321
与SS一样，小程序中的圆角可以通过
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;3
效果如下：
据此我们可以生成一个带圆角边框的搜索栏：
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>
当然对于本身不带边框的组件，如label，view等，注意要配合border属性使用才能显示出圆角边框的效果。
文章来自于：http://blog.csdn.net/beilinyu/article/details/54291321与SS一样，小程序中的圆角可以通过border-radius来设置。 以input为例，想要设置圆角边框，只需加上如下样式： border-radius: 5px即可实现如下效果： 不同的是，在小程序中想要设置仅其中某个圆角，而其它为直角，则需要使用 border-bottom
.dot{
width:2px;height:2px;border-radius: 100%;background-color: #c6a35e;display: block;position: absolute;z-index: 999
.dot-tl{left:0px; top:0px;}
.dot-tr{right:0px; top:0px;}
.dot-bl{left:0px; bottom:0px;}
.dot-br{right:0px; bottom:0px;}
.sbg{
样式截图展示：
功能描述：微信
小程序
页面需要加入搜索框时，可以直接引用到页面
中
使用，当用户未输入任何关键字时如第一张图所示，当用户输入要搜索的关键字时如第二张图所示，出现取消文案和清空的icon标识，点击取消文案或者清空的icon标识，都可清空关键字，样式恢复到第一张图所示
实现代码：
(1) searchbar.js
Component({
properties: {
placeholder: {
type: String,
在微信
小程序
中
设置
边框
圆角
，你可以通过以下方法实现：
1. 使用内联样式（style）
设置
边框
圆角
。在对应的组件上使用style属性，并
设置
border-radius样式来实现
圆角
效果。例如，如果你想给一个view组件添加
圆角
边框
，可以
设置
以下样式：
```html
<view style="border-radius: 10px; border: 1px solid #000000;">内容</view>
这样就给view组件添加了10像素的
圆角
边框
。
2. 使用外部样式表（wxss）
设置
边框
圆角
。首先，在对应的组件标签上添加一个class属性，例如：
```html
<view class="rounded-border">内容</view>
然后，在
小程序
的样式文件（wxss）
中
定义.rounded-border类的样式，如下所示：
```css
.rounded-border {
border-radius: 10px;
border: 1px solid #000000;
这样就给view组件添加了10像素的
圆角
边框
。
3. 使用
小程序
自带的组件样式类。微信
小程序
提供了一些组件样式类，可以直接在组件上使用，来实现一些常见的样式效果。例如，想给一个view组件添加
圆角
边框
，可以直接在view组件上添加一个radius类，如下所示：
```html
<view class="radius">内容</view>
然后，在
小程序
的样式文件（wxss）
中
定义.radius类的样式，如下所示：
```css
.radius {
border-radius: 10px;
这样就给view组件添加了10像素的
圆角
。
以上是在微信
小程序
中
设置
边框
圆角
的几种方法，你可以根据实际需求选择适合你的方式进行
设置
。
