微信小程序中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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
Javascript中的async awai的用法
May 17 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
使用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的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
python自动翻译实现方法
2016/05/28 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
教师党员思想汇报
2014/01/06 职场文书
国培教师自我鉴定
2014/02/12 职场文书
网管求职信
2014/03/03 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL