微信小程序中button组件的边框设置的实例详解


Posted in Javascript onSeptember 27, 2017

微信小程序中button组件的边框设置的实例详解

button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值。
如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角。如下图所示:

微信小程序中button组件的边框设置的实例详解

如上图四个角会模糊。.wxss代码如下:

.clickEncryptBtn{ 
 width:130px; 
 border-radius: 3px; 
 margin:20px auto; 
 padding-top:2px; 
 font-size:14px; 
 background-color:#CC3333; 
 <strong> border:1px solid #CC3333</strong> 
 color:white; 
 overflow:hidden; 
 height:40px; 
}

在这里设置了边框的样式,但是没有生效。

修改:将.wxss代码修改如下:

.clickEncryptBtn{ 
 width:130px; 
 border-radius: 3px; 
 margin:20px auto; 
 padding-top:2px; 
 font-size:14px; 
 background-color:#CC3333; 
 color:white; 
 overflow:hidden; 
 height:40px; 
} 
 
<strong>.clickEncryptBtn::after{ 
 border:1px solid #CC3333; 
}</strong>

将Button的边框设置放在::after属性里面

效果如下:

微信小程序中button组件的边框设置的实例详解

从上图可以看出,四个角不模糊了。

总结:对于button的边框设置,要放在::after里面设置,才生效,要不然会出现各种怪异现象

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
一个javascript图片阅览组件
Nov 09 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 Javascript
Angular 封装并发布组件的方法示例
Apr 19 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
微信小程序选择图片控件
Jan 19 Javascript
原生JS实现分页
Apr 19 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 #Javascript
vue-cli项目中怎么使用mock数据
Sep 27 #Javascript
javaScript实现复选框全选反选事件详解
Nov 20 #Javascript
javaScript实现滚动条事件详解
Mar 24 #Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
You might like
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
python 基础教程之Map使用方法
2017/01/17 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
生产主管岗位职责
2013/11/10 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
车间班组长的职责
2013/12/13 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
户外活动总结
2015/02/04 职场文书
公司保洁员管理制度
2015/08/04 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫