uniapp中button边框线的问题

最新推荐文章于 2024-07-30 15:38:03 发布
最新推荐文章于 2024-07-30 15:38:03 发布
阅读量4.8k 收藏 5
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43590833/article/details/104844386
版权

最近的项目是关于uniapp的，处于边学边做的状态。
关于其中的button，当设置border，或者一切圆角表现时，UI给了一张背景图，我直接放上去的，但是发现四周会有自带的边框线。
通过设置button::after{ border: none;}可以去掉。
（记录自己可能会遗忘的问题）

一米阳光
关注
uni-app - 去掉 button 组件自带的边框线
王佳斌
12-16 1万+
前言 组件文档：https://uniapp.dcloud.io/component/button 有时候，我们需要去掉 button 组件自带的边框线。 解决方案 直接在该页面或全局使用以下代码： button::after { border: none }
HQChart实战教程30-A股日K线数据对接-uniapp版本
小银
01-25 1429
HQChart实战教程30-A股日K线数据对接-uniapp版本日线数据对接预备知识创建K线图教程步骤1. HQChart数据回调函数部分代码2. 全量数据对接部分代码3. 增量数据更新部分代码4. 流通股本数据部分代码交流QQ群: 950092318HQChart代码地址完整demo代码1. index.vue2. 600000_day.js 日线数据对接预备知识 HQChart使用教程30-K线图如何对接第3方数据1 HQChart使用教程30-K线图如何对接第3方数据2-日K数据 HQChart使用
去掉uniapp button 的边框，默认样式
weixin_44908793的博客
07-17 1803
直接在添加的样式里面写 border:none;还有添加行内样式 border-style:none;将边框设置为透明都是不起效果的。去掉点击效果 hover-class='none'
uniapp弹出层改圆角
最新发布
WLK654321的博客
07-30 369
uni-popup 是 uni-app 提供的一个可复用的弹出层组件,它支持多种弹出层类型,如对话框、底部弹出层、顶部弹出层等,开发者可以轻松地在页面中引入并使用,并通过丰富的自定义属性进行个性化配置,满足各种弹出层场景需求,如登录提示、删除确认、底部菜单、系统消息提示等,是一个简单易用、功能强大的 uni-app 组件。
uniapp----button按钮去除边框
m0_74265396的博客
12-15 2369
使用button标签，给其添加。
uni-app中button未设置边框，显示有边框
jkhedge的博客
07-18 1712
uni-app中button未设置边框，显示有边框，消除边框
uniapp＜button＞按钮去掉边框
温温的博客
08-23 3885
添加plain="true"属性。
微信小程序中button去除默认的边框实例代码
10-16
这一属性能够直接移除按钮的边框线。代码示例如下： ```css button { border: none; } ``` 除了直接设置border为none外，还可以使用outline属性来达到类似的效果。outline属性定义元素周围的一条轮廓线，但与边框...
设置button按钮边框颜色
热门推荐
wyx1114的博客
03-01 1万+
首先需要在drawable文件下新建一个XML文件，然后设置如下 xml version="1.0" encoding="UTF-8"?> xmlns:android="http://schemas.android.com/apk/res/android"> android:color="@color/black" /> an
uview 修改u-button按钮的border
树上骑个猴的博客
03-02 1418
效果1： <view class="button-layout" style="margin-top:20rpx;"> <view style="width:50%;"> <u-button class="no-border" type="success" @click="btn1()">按钮1</u-button> </view> <view style="width:50%;">
uni-app去掉button边框
guoqingtai的博客
12-23 1491
.button::after{ border: none;}
uni-app中button本身的边框线问题
yanhhillo的博客
05-15 639
当给button添加border属性并切边角时，会发现button的四个角位置会有线（根据手机不同有的会显示，有的不会），这个线就是uni-app本身自带的border，用button::after{ border: none;
uni-app中的button按钮，去掉默认的灰色边框
weixin_43337481的博客
07-12 2816
想要去掉默认的灰色边框，需要修改。
uni-app使用button按钮，设置border：none不起作用
强者惜字如金，弱者废话连篇！
08-09 1646
uni-app使用button按钮，设置border：none不起作用 uni-app的button设置border:0;去掉边框线是不行的，需要设置button::after{ border: none;} 这样就可以解决这个button自带的边框问题了
uni-app中，button组件去掉自带的边框线
也简的博客
02-21 3406
去掉button自带的边框线，以实现自定义的布局
2024uniapp button 设置圆角后去除边框线
Android_studio_ID的博客
05-17 141
button::after { border: none; }
uniapp button 有圆角时显示模糊
u011520533的博客
02-05 467
添加 .login:after属性就可以了。
解决设置元素圆角后但是在某些设备还是显示方角边框之被忽略的outline
a393007511的博客
12-13 388
最近在做个项目用uniapp开发移动应用；开发中遇到个问题，有些页面元素莫名会有边框不知道何种原因；怀疑是元素自动获取焦点造成；尝试改变焦点并没有消除边框；最后发现是outline造成的； 解决方案在全局css中设置 uni-view{ outline: none; } uni-image{ outline: none; } ...
uniapp button 去掉边框
06-28
### 回答1： 可以通过设置按钮的样式来去掉边框，具体方法如下： 1. 在按钮的样式中添加border:none;属性，表示去掉边框。 2. 如果想要去掉按钮的阴影效果，可以添加box-shadow:none;属性。 例如： ``` <uni-button style="border:none;box-shadow:none;">按钮</uni-button> ``` 这样就可以去掉按钮的边框和阴影效果了。 ### 回答2： 在uniapp中，可以使用以下方法去掉按钮的边框： 1. 使用样式覆盖原有的按钮样式。可以在页面的style中添加以下代码： ``` button { border: none; /* 去掉按钮的边框 */ } ``` 2. 使用uni-app的自定义组件实现。可以将原有的button组件进行封装，去掉边框，并将封装后的组件直接替换原有的button组件。示例如下： 在components目录下新建一个button组件： ``` <!-- button.vue --> <template> <view class="custom-button" @click="$emit('click')"> {{ text }} </view> </template> <script> export default { name: 'CustomButton', props: { text: String } } </script> <style> .custom-button { display: inline-block; padding: 10px; background-color: #007aff; border-radius: 5px; color: #fff; font-size: 16px; text-align: center; cursor: pointer; border: none; /* 去掉按钮的边框 */ } </style> ``` 在使用button组件的页面中，将原有的button组件替换为自定义的button组件： ``` <!-- index.vue --> <template> <view class="container"> <custom-button text="点击我"></custom-button> </view> </template> <script> import CustomButton from '@/components/button.vue' export default { components: { CustomButton } } </script> ``` 以上两种方法都可以实现去掉uniapp button组件的边框。根据需求可以选择适合自己的方法进行实现。 ### 回答3： uniapp的button组件默认带有边框，但是我们可以通过CSS样式来去掉边框。 方法一： 在button标签内添加属性style="border:none;"，即可去掉边框。 示例代码： ``` <template> <button style="border:none;">去掉边框</button> </template> ``` 方法二： 在<style>标签内添加样式，设置border属性为none。 示例代码： ``` <template> <button class="btn">去掉边框</button> </template> <style> .btn{ border: none; } </style> ``` 以上两种方法均可实现去掉button组件的边框。需要注意的是，使用样式去掉边框的时候，需要在样式中给button组件指定class或者id，否则可能会影响其他组件的样式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值