当使用vant时，设置border-radius无效

最新推荐文章于 2023-12-01 17:57:48 发布
最新推荐文章于 2023-12-01 17:57:48 发布
阅读量826 收藏
点赞数 1
分类专栏： 知识点简述 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56715703/article/details/130866568
版权

图示：

 大致意思就是：我在div设置了border-radius: 5.34vw;看不出效果，然后加了个border: 1px solid red;看效果。发现，vant组件把div的圆角挡住了，导致没达到我想要的效果。

此时有两种解决办法。

办法1：在div上加overflow:hidden

办法2：给div一个padding值，让vant组件与div之间有距离，再给个相同的背景颜色即可

  padding: 37px;
  background-color: #fff;

最后效果如下

 

三月.'
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vant组件修改样式_解决vant-UI库修改样式无效的问题
weixin_39685836的博客
12-22 6234
最近用vue写页面时，发现使用vant的有些UI组件，而又不能满足自己的样式，修改CSS样式还是无效。css一般都会使用sass或者less，加了scoped后修改的样式不起作用，即使加了important也没用vue项目中，当标签有scoped属性时，它的 CSS 样式只作用于当前组件中的元素，父组件的样式将不会渗透到子组件中。解决办法：1.对于css语法起作用使用深度选择器，使用 >>> 操作...
解决border-radius失效问题
12-09
解决border-radius失效问题
设置border-image后border-radius不生效的问题解决
最新发布
Ruiqi8的博客
12-01 2001
只需要把 border-radio 变成 clip-path: inset(0 round 12rpx);
通过cdn引入vant，van-swipe-cell没有效果
扮老虎的猪
06-03 2602
前言 最近接手一个项目，是h5多页面，页面中使用了vant的一些插件，是通过cdn的方式引入样式和js的。使用
vant.js的van-cell的横线怎么去掉
肖肖肖丽珠的博客
08-12 5443
如图我想去掉这个横行。给他加样式border:0;还以为是：after伪类上面加了边框。然后研究文档发现其实只要在标签内加上一个boder=“{{false}}”就行了。
解决vant title-active-color与title-inactive-color不生效问题
01-18
2、使用vant组件 npm install vant –S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错...
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
如何修改 Vant移动端组件库中的 Dialog弹出框组件样式
x2497010433的博客
09-09 3136
修改 Vant移动端组件库中的 Dialog弹出框组件样式
微信小程序 vant 样式覆盖与定制主题
平凡
10-08 6881
微信小程序中使用vant，组件样式修改方法
vue vant组件库修改样式
wangshuai13383347132的博客
01-02 3302
手机端项目中，用到了View-UI组件库，但是View-UI的级联选择器cascader控件无法满足底部弹出的需求，所以改用vant组件库搭配 Field 和 Popup 组件使用cascader控件。 示例https://vant-contrib.gitee.io/vant/#/zh-CN/cascader#dai-ma-yan-shi 但是项目中原有的Input输入框都是用的View-UI，都是带边框的，为了和原有项目的输入框样式保持一致，需要修改vant组件库Field输入框的样式 通过点击控件栏，
vant框架van-field
waxuanwa的博客
11-04 9691
【代码】vant框架van-field标签添加外边框样式。
2021-09-08 黑马移动端头条项目-day09
m0_58017645的博客
09-09 480
目录 编辑用户资料 一、创建组件并配置路由 二、页面布局 三、展示用户信息 四、修改昵称 五、修改性别 六、修改生日 七、修改头像 7.1图片上传预览 7.2头像裁切 7.3保存更新 编辑用户资料 一、创建组件并配置路由 创建views/user-profile/index.vue 路由配置 // 路由配置 { path: '/user/profile', name: 'user-profile', component: () => ...
vue-cli4.5.13按需引入vant，解决vant样式失效问题
weixin_46190955的博客
06-28 1870
1.使用vue-cli4.5.13新建vue项目 ①先全局安装最新版本的vue-cli,如果安装了旧版本的，最好先卸载 npm install -g @vue/cli # OR yarn global add @vue/cli @创建项目 vue create 自己项目的名称 2，下载vant npm i vant -S 3.下载babel-plugin-import并在babel.config.js中修改配置如下（babel-plugin-import文档上有详细说明如何配置） module.exp
border-radius属性失效问题的解决办法
祈澈菇凉
10-23 3万+
今天调试项目的时候突然发现，设置的border-radius竟然失效了，打开f12，眼看着浏览器把这个属性也给划掉了，不是一般的郁闷，按照道理来说，不应该会出现这样神奇的bug。 图片.png css代码： #photo{ width: 80px; height:80px; border-radius:10px ; } 解决办法：万能的!im...
Vant van-button去除边框，自定义样式，改变组件自带的样式属性
z772330927的博客
05-06 2万+
van-button去除边框，自定义样式 基本语法 <van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <va...
vantUI框架在vue项目中的应用踩坑
热门推荐
milli236的博客
07-23 4万+
细节未完善。参考地址编辑方面的应用。 1.订单提交地址等组件的应用。 使用的组件有如下： import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块； &lt;van-address-edit :area-list="area...
VantUI设置van-collapse向上展开
05-17
可以通过设置 `direction` 属性为 "up" 来实现 `van-collapse` 向上展开。例如： ```html <van-collapse :value="activeNames" direction="up"> <van-collapse-item title="标题1" name="1"> 内容1 </van-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值