【微信小程序】button border: none；去掉边框后后还有边框

修复按钮边框问题与样式优化

最新推荐文章于 2024-10-31 19:47:49 发布

原创最新推荐文章于 2024-10-31 19:47:49 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

21 篇文章

订阅专栏

这篇博客探讨了一个关于CSS样式的问题，即在设置button样式为无边框后仍然显示边框的情况。作者通过分析样式代码，发现在特定元素的伪类选择器`:after`中添加`border:none;`可以解决这个问题。此外，还展示了`.paybutton`类的详细样式定义，用于创建具有特定尺寸、圆角、对齐方式和背景颜色的按钮。博客内容着重于前端开发中的CSS细节和问题排查技巧。

在这里插入图片描述
button样式如下

button {
  border: none;
  width: 200rpx;
  padding: 0;
  margin: 0;
}
.paybutton {
  display: flex;
  flex-direction: row;
  color: white;
  font-size: 32rpx;
  margin-right: 40rpx;
  width: 200rpx;
  max-width: 200rpx;
  height: 60rpx;
  border-radius: 30rpx;
  line-height: 60rpx;
  align-items: center;
  justify-content: center;
}