⼩程序button组件边框问题
在写⼩程序项⽬时更改button样式,发现修改边框并不能覆盖原本⼩程序button样式。
正确去除边框应该是
button::after{
border:0;
}
研究后发现⼩程序button组件边框并不是在button元素上添加边框;⽽是⽤::after创建了伪元素设置了边框。下⾯是api上扣出的代码,应该是⼩程序中button::after源码;
wx-button:after {
content: " ";
borderboxwidth: 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;
}
可以看出来。这个边框是after创建的伪元素⽤position定位于button元素上(不⽤定位就是显⽰在元素后⾯)。
⼩程序在这⾥先放⼤了伪元素宽⾼再缩⼩应该是为了显⽰出0.5px的border。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论