微信小程序中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 相关文章推荐
js或css文件后面跟参数的原因说明
Jan 09 Javascript
js切换div css注意的细节
Dec 10 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Vue中的组件及路由使用实例代码详解
May 22 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 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
python实现简单井字棋小游戏
2020/03/05 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python 实现一个简单的web服务器
2021/01/03 Python
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
担保书范文
2015/01/20 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
追悼会悼词大全
2015/06/23 职场文书