微信小程序: 设置 Button 边框 border

最新推荐文章于 2025-04-29 16:59:08 发布
最新推荐文章于 2025-04-29 16:59:08 发布
阅读量2.8w 收藏 12
点赞数 10
分类专栏： 微信小程序 文章标签： 微信小程序 Button Border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soindy/article/details/79313372
版权
本文介绍了如何在微信小程序中自定义Button样式，通过CSS设置边框、圆角及背景颜色等属性，实现美观且符合设计需求的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

微信开发工具 v1.02.1802080

微信小程序自定义 Button 边框 border主要代码: 

.myButton{
  border: 1px solid #70bcf6; 
  border-radius: 2px;  
  background-color: white;
}

.myButton::after{
  border: none; 
}

效果如下:

这里写图片描述

微信小程序开发(四) - 全局外边框配置 - json 文件
lendq的Blog
03-06 3478
注 :注释只能在wxml , js 文件中使用(<!-- --> , // ) 其余`json , wxss`文件都不能使用注释 JSON 文件 的作用 app.json 本质上只会更改外边框(除了网络超时) pages.json除了以上作用以外,还可以用来添加自定义wxml组件,后面会补充 项目配置文件 project.config.json 该...
微信小程序开发手记之三：backgroud和border属性
王梵
04-14 8591
先来看一段样式，在wxss中page{ background-color: cadetblue; background-image: url(../../../image/weixin_logo.png); background-repeat:repeat-x; background-position-y: top; } 注意，page前面并没有小数点，而且也不用
给Button添加边框
LI0_0BIN的博客
04-20 2610
GradientDrawable drawable = new GradientDrawable(); drawable.setShape(GradientDrawable.RECTANGLE); // 画框 drawable.setStroke(1, Color.BLUE); // 边框粗细及颜色 drawable.setColor(0x22FFFF00); // 边框内部颜色
微信小程序引入echarts
最新发布
pmywy的博客
04-29 731
【代码】微信小程序引入echarts！！！
微信小程序 —— button按钮去除border边框
Wu_shuxuan的博客
10-11 6万+
在开发微信小程序组件框架时，我遇到了一个问题，微信小程序中的button组件有特定的css，背景可以用：“background：none”去掉，但是边框再用“border : none”去掉就不可以了，这也是微信小程序与h5的不同之处。但是在微信小程序中使用:after选择器就可以实现这一功能。
微信小程序button按钮怎么去掉边框
qq_45067263的博客
04-11 2346
微信小程序button按钮怎么去掉边框。
button 动画 border
weixin_41141811的博客
06-22 179
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> button{ border: 0; background: transparent; display: inline-block; height: 35px; margi
微信小程序中button组件的边框设置的实例详解
08-29
本文将详细讲解如何在微信小程序中设置`button`组件的边框，并通过实例解决可能出现的问题。 首先，微信小程序中的`button`组件边框并非通过常规的`border`属性直接设置，而是利用伪元素`:after`来实现。这是由于...
微信小程序 button 的样式设置为图片的方法
10-15
最后，对于微信小程序button样式设置为图片的所有这些方法，在实现时都需要对wxml、wxss和可能的js代码进行相应的调整。开发者应该结合具体需求和场景选择最合适的实现方式，以确保最终用户界面的可用性和美观性。...
微信小程序中button去除默认的边框实例代码
11-30
在微信小程序中，开发者经常会遇到需要自定义按钮（button）样式的情况，特别是在设计界面时，去除默认的边框显得尤为重要，以保持界面的统一性和美观性。本篇将详细讲解如何在微信小程序中去除button的默认边框，并...
关于微信小程序button按钮边框没办法去掉的问题
sillage_honey的博客
08-28 748
在我做公司项目的发现，微信小程序的自带button按钮单纯的用class类进行样式的设计没有生效。通过检查发现，自带的button按钮的样式是用过button::after进行设置的。
CSS中button标签自带border属性
tao_sheng_yi_jiu的博客
01-21 3856
问题描述： 下图中两个button各占50%，却上下左右都有缝隙存在。 需求是，去掉缝隙。 css代码如下： .left-button { float: left; width: 50%; height: 100%; background-color: #404040; text-align: center; } .right-button
微信小程序 - 修改 button 边框和背景色
weixin_34378922的博客
06-07 1万+
为什么80%的码农都做不了架构师？>>> ...
小程序设置边框border
培根芝士的专栏
05-28 1万+
.demo-view { border-bottom: 2rpx solid red; }
微信小程序css篇----边框(Border)
热门推荐
鎏嫣宫守护的博客
12-30 21万+
一.边框：border 设置对象边框的特性。 1.语法：border：length   style  color  2.style：none ，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。    二.相关属性。 1.border-width：设置边框宽度：常用取值：medium：默认值，相当于3px。thin
uni-app中button本身的边框线问题
yanhhillo的博客
05-15 864
当给button添加border属性并切边角时，会发现button的四个角位置会有线（根据手机不同有的会显示，有的不会），这个线就是uni-app本身自带的border，用button::after{ border: none;
button 按钮的边框 border 怎么去除
zlq_CSDN的博客
03-15 6623
这次在我开发微信小程序的时候，发现一个问题：微信小程序中的button组件存在特定的css样式，我们可以通过 “ background：none；” 来去除背景色，但是呢，边框用“border : none”是去不了边框的，这也是微信小程序与h5的不同之处。 解决：在微信小程序中使用 ::after 选择器就可以实现这一功能。 传统：“border:none;”，来去除边框依旧有一条细细的bo...
【微信小程序】边框的多种样式设置及效果
weixin_63898930的博客
08-27 5351
四、双线（double）五、凹陷（groove）七、内嵌（insert）八、外嵌（outset）三、点线（dotted）六、凸起（ridge）一、实线（solid）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值