22/10/13 vue中box-shadow不生效

最新推荐文章于 2023-08-15 10:14:01 发布

六月要好好加油呀

最新推荐文章于 2023-08-15 10:14:01 发布

阅读量2.1k

点赞数 1

分类专栏： # bug知识点记录 # css 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Nighsloth/article/details/127300628

版权

bug知识点记录同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

背景
代码

box-shadow: rgb(0 0 0 / 20%) 0px 2px 1px -1px,
        rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px 3px 0px;

在这里插入图片描述
页面上的效果,这样写无效

而在html中就能够渲染
在这里插入图片描述

解决方法写成这种

    box-shadow: 0 0px 2px rgba(0, 0, 0, .2);

优惠劵

六月要好好加油呀

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
22/10/13 vue中box-shadow不生效

vue中box-shadow不能写成rgb(0 0 0 / 20%)
复制链接

扫一扫

专栏目录

vue-next/runtime-core 源码阅读指南详解

10-16

主要介绍了vue-next/runtime-core 源码阅读指南详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

详解CSS3阴影 box-shadow的使用和技巧总结

09-24

主要介绍了详解CSS3阴影 box-shadow的使用和技巧总结 ,具有一定的参考价值，有需要的可以了解一下。

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序设置box-shadow阴影在真机上无效

最新发布

Lon_wang的博客

08-15

3354

页面布局中，阴影盒子紧贴一起导致box-shadow不生效，不起作用的解决办法。以及使用个box-shadow实现四周阴影效果

box-shadow无效果

m0_54934841的博客

06-21

2997

给盒子加上box-shadow不出现效果 box-shadow: 0px 2px 9px 0px rgb(129 128 128 / 50%); 添加z-index即可显示效果 z-index: 898;

前端CSS3阴影盒子踩坑

m0_49223543的博客

08-13

370

前端CSS3阴影盒子踩坑

css3中-moz、-ms、-webkit各什么意思

weixin_33858249的博客

11-20

211

-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性转载于:https://blog.51cto.com/vincent1992/1580254

CSS3属性box-shadow使用详细教程

12-13

box-shadow：length length length length colorlength：阴影水平偏移值length：阴影垂直偏移值length：阴影模糊值length：阴影边框color：阴影颜色说明：设置块阴影 box-shadow:3px 3px 6px 0px #666效果如下图: box-shadow:-3px -3px 6px 0px #666效果如下图： box-shadow:0px 0px 12px 0px #666效果如下图： box-shadow: 0px 0px 10px 5px #666效果如下图： 1. box-shadow属性的浏览器兼容性先

vue-emoji-box：vue-emoji-box表情选择器

02-05

cd vue-emoji-box yarn 或 npm install yarn serve 或 npm run serve 插件安装 yarn add vue-emoji-box 使用说明 1.默认使用emoji字符表情，可自定义表情数据，表情包资源建议放置在cdn或本地静态资源目录“ / ...

vue-doc-preview:Vue文档预览组件

05-06

vue-doc-preview vue文档预览组件，此组件将在页面上显示文档的内容。英文自述文件|用进口首先，从yarn或npm添加此程序包。 yarn add vue-doc-previewornpm i vue-doc-preview --save然后，将此组件导入.vue文件。 ...

vue-typescript-admin-mock-server:for vue-typecript-admin-template项目的模拟服务器

04-29

Vue TypeScript管理模拟服务器项目的模拟服务器演示链接（由vue-typecript-admin-template使用）概述此项目中api文件夹下的javascript代码是从的打字稿源代码生成的（通过在此目录中运行tsc命令）。唯一的手动更改...

2021/02/22 vue项目安装node-sass、sass-loader报错记录

Nighsloth的博客

02-22

4356

背景：用vue 脚手架新建了个项目，打算用scss写样式，第一次用，就一直报错一直报错。快捷通道如果不想看多个报错原因的，可以直接卸载安装好的node-sass和sass-loader,然后安装 “node-sass”: “^4.14.1”, “sass-loader”: “^7.3.1”,运行项目试试。报错1:Failed to resolve loader: sass-loader –意思是项目没有安装sass-loader插件 –按以下图片方法直接安装，运行报错报错2:Synt.

22/07/31 vue3bug记录：项目运行报错unplugin-vue-components&router-view

Nighsloth的博客

07-31

2422

vue yarn 项目报错运行

2021/04/28 前端post请求传数组

Nighsloth的博客

04-29

1760

背景：后端需要这种格式的数据，接口文档要求如下我也是第一次见，后端说这叫，post一个表单数组，原来的项目里有现成的，参考如下网上看，这种描述大致是？同名key传值？解决方法代码 ...

2022/06/28 react项目报错FATAL ERROR: invalid array length Allocation failed - JavaScript heap out of mem

Nighsloth的博客

06-28

1584

react项目运行遇到OOM报错，内存溢出

vue3中 box-shadow

05-27

在Vue3中，你可以使用CSS的box-shadow属性来添加阴影效果。你可以在Vue组件的style中使用box-shadow属性来添加阴影效果，例如： ```html <template> <div class="box"></div> </template> <style> .box { width: 100px; height: 100px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } </style> ``` 在上面的例子中，我们给一个class名为.box的div添加了一个阴影效果。box-shadow属性的值由四个参数组成，分别是： 1. 水平偏移量 2. 垂直偏移量 3. 模糊半径 4. 阴影颜色你可以根据需要调整这些参数来实现不同的阴影效果。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交