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

古城微笑少年丶 2022-06-09 07:00 285阅读 0赞

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

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

![Center][]

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

.clickEncryptBtn{
      width:130px;
      border-radius: 3px;
      margin:20px auto;
      padding-top:2px;
      font-size:14px;
      background-color:#CC3333;
      border:1px solid #CC3333;
      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;
    }
    
    .clickEncryptBtn::after{
      border:1px solid #CC3333;
    }

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

![Center 1][]

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

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

[Center]: /images/20220609/0869848c8cd94c4ab7b83f578cb57918.png
[Center 1]: /images/20220609/7519f7b76605455fb0216652d156ea86.png

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序button按钮设置宽度无效

button按钮设置宽度无效背景：在开发小程序的过程中，遇到了button按钮设置宽度无效的问题微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进

今天药忘吃喽~/ 2023年10月10日 22:50/ 0 赞/ 58 阅读

相关自定义微信小程序tabBar组件上边框的颜色

背景：在微信小程序的实际开发过程中，有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色，以满足项目需求 ![此图像的alt属性为空；文件名为imag

淩亂°似流年/ 2023年02月22日 12:09/ 0 赞/ 25 阅读

相关微信小程序——text组件（文本）

text 文本在使用小程序时，如果想通过长按文字进行复制文字内容，就要把该内容写在text中。 <table> <thead> <tr> <th>属性

古城微笑少年丶/ 2022年10月24日 01:41/ 0 赞/ 309 阅读

相关微信小程序：button组件的边框设置

button的边框是用:after方式实现的，用户如果在button上定义边框会出现两条线，需用:after的方式去覆盖默认值。如果设置了Button的背景色，没有用:af

古城微笑少年丶/ 2022年06月09日 07:00/ 0 赞/ 286 阅读

相关微信小程序 button 的样式设置为图片

方法一：button 与 image 重叠将button设为 opacity:0 然后定位放在那副图片的上边。方法二：background-image bac

墨蓝/ 2022年05月15日 23:46/ 0 赞/ 263 阅读

相关微信小程序day03_01之form组件 button

button 为按钮, 属性有如下这些: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

叁歲伎倆/ 2022年03月09日 08:42/ 0 赞/ 330 阅读

相关微信小程序按钮 button 组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] <table> <thead> <tr> <th align="left"

ゝ一世哀愁。/ 2021年09月08日 00:24/ 0 赞/ 619 阅读

相关微信小程序文本 text组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 文本。 <table> <thead> <tr> <th align

矫情吗；*/ 2021年09月07日 23:24/ 0 赞/ 486 阅读

相关微信小程序图标 icon组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 图标。组件属性的长度单位默认为px，[2.4.0][]起支持传入单位(rpx/px)。

旧城等待，/ 2021年09月07日 23:18/ 0 赞/ 557 阅读

相关微信小程序把玩 button组件

button按钮用的算是最普遍的组件之一。主要属性：这里写图片描述 wxml  <button type="defaule...

红太狼/ 2021年04月17日 16:52/ 0 赞/ 645 阅读