小程序中圆角边框的设置

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

小程序中圆角边框的设置相关推荐

微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？
在微信小程序中,我们不免的要设置背景图片和字体颜色. 那怎么样才能做到简单的设置背景图片和字体颜色呢? 话不多说,直接开讲首先先说怎么设置页面背景图片: 这是博主准备的照片. 下面是在wxml中的代 ...
MATLAB slider中的数值,在微信小程序中如何使用slider设置数据值
这篇文章主要介绍了微信小程序使用slider设置数据值及switch开关组件功能,结合实例形式分析了slider组件及switch组件的功能与使用方法,并附带源码供读者下载参考,需要的朋友可以参考下 ...
小程序剖析 | 小程序中Page的数据设置
先上一个例子,例子作为本文的依据: Page()函数用于构建一个页面. 还有一系列函数下面为大家一一介绍. // pages/Java/java.js Page({/*** 页面的初始数据*/dat ...
微信小程序中的tabBar设置
我们先来看一份图,这个设置在官方文档中已经写得很清楚了,我只是做一个总结注:我写注释是为了方便说明,在小程序中的json文件中是不能用注释的这个tabBar属于全局属性,因此就在全局配置文件app ...
微信小程序中，将一张图设置成背景图的几种方式
三种方法实现 1.使用网络图片 <view class="page" style=" background-image: url('{{ossHost}}nmxy/ ...
微信小程序中如何设置textarea或者van-field中的placeholder换行显示
微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可 <textarea class="txt_wor ...
uniapp 微信小程序最近写的两个小程序中都会有，微信分享的设置，每次都在单个页面中写相同的内容，修改很不友好。下面全局分享代码做了记录
最近写的两个小程序中都会有,微信分享的设置,每次都在单个页面中写相同的内容,修改很不友好.下面全局分享代码做了割记录首先在小程序中配置微信分享,和微信朋友圈, onShareAppMessage, ...
微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
微信小程序界面设计小程序中CSS3样式精通课程-边框-box-shadow 盒阴影
边框-box-shadow 盒阴影微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 通用语法浏览 ...

小程序中圆角边框的设置

小程序中圆角边框的设置相关推荐

最新文章

热门文章