这篇文章主要介绍了微信小程序中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里面设置,才生效,要不然会出现各种怪异现象

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

最新资讯
归零重启,华米OV们迎来软件创新困局

归零重启,华米OV们迎来

没想到2019年,国产手机行业像重新归零一般,回到了最初出
法国监管机构处罚谷歌数千万欧元 谷歌宣布上诉

法国监管机构处罚谷歌

据路透社报道,谷歌将对法国隐私监管机构的数千万欧元罚
互联网创业专心做业务,别想不开搞研发

互联网创业专心做业务

很多老板根本不理解产品研发是什么。
德州仪器第四季度营收37.2亿美元:下降1%

德州仪器第四季度营收

德州仪器本周三发布2018年第四季度财报,其中当季盈利超
越相似的伴侣过得越幸福吗?或许对双方有一定益处

越相似的伴侣过得越幸

瓦尔什和奈夫在针对新婚夫妇开展的研究中发现,如果人们
2019,热闹的网络大电影凭什么躺着赚钱?

2019,热闹的网络大电影

过去一年,影视行业遭遇的不友好指数创了新高,若问2019年
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图