微信小程序中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参数的小问题
Mar 02 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
js显示文本框提示文字的方法
May 07 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Angular2自定义分页组件
Apr 19 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
超轻量级的js时间库miment使用解析
Aug 02 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之第五天
2006/10/09 PHP
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python url 参数修改方法
2018/12/26 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
如何在python中执行另一个py文件
2020/04/30 Python
python 代码运行时间获取方式详解
2020/09/18 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
公司委托书范本
2014/04/04 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
初一语文教学反思
2016/03/03 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python