微信小程序中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实现分割提取页面所需内容
May 09 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
Drupal简体中文语言包安装教程
2014/09/27 PHP
php header函数的常用http头设置
2015/06/25 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
Python中的is和id用法分析
2015/01/26 Python
Python编写登陆接口的方法
2017/07/10 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
企业宣传方案
2014/03/04 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
车间主任岗位职责
2014/03/16 职场文书
社区维稳工作方案
2014/06/06 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
python文件名批量重命名脚本实例代码
2021/04/22 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
python运算符之与用户交互
2022/04/13 Python