这篇文章主要介绍了微信小程序中button组件的边框设置的实例详解的相关资料,希望通过本文大家能够这部分内容,需要的朋友可以参考下

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

button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值。
如果设置了Button的背景色,没有用:after设置边框的颜色,则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的边框设置,要放在::after里面设置,才生效,要不然会出现各种怪异现象

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

最新资讯
在线K12赛道“为大炮装刺刀”,只有活下来才有明天

在线K12赛道“为大炮

对于正处于加速成长期的在线教育行业而言,通过加强营销
租客和房东都要打起来了,蛋壳公寓还在微博阴阳怪气

租客和房东都要打起来

和传统的房东不一样,蛋壳自己本身是没有房子的,他们的房
卫龙拟赴港IPO:一年营收49亿,毛利比肩农夫山泉

卫龙拟赴港IPO:一年营

从学校对门零食摊上5毛钱一包的垃圾食品,到火到国外的
揪出Switch破(kai)解(she)三名原创作者后 任天堂不罢休

揪出Switch破(kai)解(she)三名原

不同于PS4和Xbox One,任天堂Switch发售后遭遇破(kai)解(she)的速
年度最倒霉投资人:踩雷瑞幸,押宝蛋壳

年度最倒霉投资人:踩雷

一年之内两度踩雷,愉悦资本及其创始及执行合伙人刘二海
苹果前女性高管担任救助儿童会董事会主席

苹果前女性高管担任救

苹果公司负责零售业务的前副总裁安吉拉·阿伦茨被任命
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,