微信小程序:button组件的边框设置 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序:button组件的边框设置

发表时间:2021-5-11

发布人:葵宇科技

浏览次数:76

button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值。

如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角。如下图所示:

如上图四个角会模糊。.wxss代码如下:

  1. .clickEncryptBtn{
  2. width:130px;
  3. border-radius: 3px;
  4. margin:20px auto;
  5. padding-top:2px;
  6. font-size:14px;
  7. background-color:#CC3333;
  8. <strong> border:1px solid #CC3333</strong>
  9. color:white;
  10. overflow:hidden;
  11. height:40px;
  12. }

在这里设置了边框的样式,但是没有生效。 
修改:将.wxss代码修改如下:

  1. .clickEncryptBtn{
  2. width:130px;
  3. border-radius: 3px;
  4. margin:20px auto;
  5. padding-top:2px;
  6. font-size:14px;
  7. background-color:#CC3333;
  8. color:white;
  9. overflow:hidden;
  10. height:40px;
  11. }
  12. <strong>.clickEncryptBtn::after{
  13. border:1px solid #CC3333;
  14. }</strong>

将Button的边框设置放在::after属性里面。效果如下:


从上图可以看出,四个角不模糊了。


总结:对于button的边框设置,要放在::after里面设置,才生效,要不然会出现各种怪异现象


相关案例查看更多