【微信小程序自学之路】button按钮边框问题

微信小程序 button按钮 边框border 不生效的问题

常规修改按钮边框border属性

常规理解是

1
2
3
button {
border: 2rpx solid #f00;
}

但是,微信小程序提供的按钮样式,边框效果并非 button 标签选择器实现的,而是 button:after 伪元素实现的

仔细点,小程序开发者工具可以看到 button 的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
button:: after {         user agent stylesheet
content: " ";
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
border-radius: 10px;
}

从此可以出,按钮边框实际是通过 伪元素实现的,因此我们应该这样修改

1
2
3
button:after {
border: 10rpx solid #000;
}
坚持原创技术分享,谢谢鼓励我继续创作!