微信小程序中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里面设置，才生效，要不然会出现各种怪异现象

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

# 微信小程序中button组件的边框设置 # 小程序 # button边框设置的详解 # 微信小程序button标签open-type属性原理解析 # 微信小程序分享功能之按钮button 边框隐藏和点击隐藏 # 微信小程序中添加客服按钮contact-button功能 # 微信小程序button组件使用详解 # 微信小程序 Button 组件详解及简单实例 # 微信小程序（十四）button组件详细介绍 # 微信小程序 button样式设置为图片的方法 # 放在 # 在这里 # 如有 # 希望能 # 可以看出 # 所示 # 谢谢大家 # 如下图 # 上图 # 默认值 # 背景色 # 需用 # 两条线 # 疑问请 # 如上图 # 模糊了 # class # brush # px # width

返回目录在线咨询

上一篇：什么是粘性内容，如何提升流量_SEO优化教程
下一篇：C#如何实现多语言（国际化）支持？.NET资源文件与本地化实现方案

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求