小程序中圆角边框的设置
2018-01-17 14:12
477 查看
与CSS一样,小程序中的圆角可以通过border-radius来设置。
以input为例,想要设置圆角边框,只需加上如下样式:
即可实现如下效果:
不同的是,在小程序中想要设置仅其中某个圆角,而其它为直角,则需要使用 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; 则没有效果
以下是设置左半边为圆角,右半边为直角的情况:
2
另外,小程序中按钮button是自带圆角的,
因此如果想设置仅一半显示圆角,需如下设置:
2
3
效果如下:
据此我们可以生成一个带圆角边框的搜索栏:
wxml
2
3
4
5
6
7
8
wxss
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
当然对于本身不带边框的组件,如label,view等,注意要配合border属性使用才能显示出圆角边框的效果。
以input为例,想要设置圆角边框,只需加上如下样式:
border-radius: 5px1
即可实现如下效果:
不同的是,在小程序中想要设置仅其中某个圆角,而其它为直角,则需要使用 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;1
2
另外,小程序中按钮button是自带圆角的,
因此如果想设置仅一半显示圆角,需如下设置:
border-radius: 0px; border-bottom-right-radius: 5px; border-top-right-radius: 5px;1
2
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>1
2
3
4
5
6
7
8
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; }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
当然对于本身不带边框的组件,如label,view等,注意要配合border属性使用才能显示出圆角边框的效果。
相关文章推荐
- 小程序中圆角边框的设置
- GradientDrawable 可以用来通过程序方式给控件设置背景如圆角,边框等
- 小程序中圆角边框的设置
- LinearLayout设置白色背景、灰色边框、倒圆角
- 如何设置窗口圆角及边框
- LinearLayout设置白色背景、灰色边框、倒圆角
- 设置按钮圆角边框颜色及粗细
- Android开发之给控件设置圆角边框
- 设置UIImage的边框和圆角大小以及颜色
- 给UIImageview 添加边框 或者设置成圆角
- UIVIEW 设置圆角 +边框阴影
- IOS--UIViewUIButtonUIImageView设置圆角、阴影、边框的方法
- Qt 设置圆角边框
- UIView 设置圆角和边框备忘
- UIbutton设置圆角边框(Xcode8.3.3+swift3)
- storyboard 设置圆角与边框颜色
- UIView,UIButton,UIImageView等设置圆角,设置阴影,设置边框的方法
- IOS设置UIView的边框为圆角
- iOS - UIButton设置圆角和边框及边框颜色
- 给UIImageview 添加边框 或者设置成圆角-ios5貌似不能用?