- 综合排序
- 最热优先
- 最新优先
- 来自专栏杰的记事本
filter:drop-shadow与box-shadow的区别
二、同样的参数值，表现效果有差异 filter中的drop-shadow语法如下： filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); 例如： filter:drop-shadow 三、drop-shadow没有内阴影效果 box-shadow支持inset内阴影，如： box-shadow: inset 5px 5px 10px black; 但是，drop-shadow却没有。 drop-shadow有一个很厉害的特性，也就这一个特性，让其以后有足够的机会大放异彩！那就是，drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已。 什么意思呢？ 六、drop-shadow的实际应用 ? 现在，有了drop-shadow，阴影就真的变成了阴影了。
2K10发布于 2019-09-04 - 来自专栏Coco的专栏
CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果
通过本文，你可以学到： 如何利用 filter: drop-shadow() 对元素的部分内容添加单重及多重阴影，以及利用多重阴影实现 Neon 效果 HTML 元素配合 filter: drop-shadow 利用 drop-shadow 对元素的部分内容添加单重及多重阴影 首先，要实现上述效果，很重要的一步是给元素的部分内容添加上阴影。 filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 5px #000) drop-shadow(0 0 --colorA: #f24983; filter: drop-shadow(0 0 2px var(--colorA)) drop-shadow(0 0 5px var(--colorA)) drop-shadow(0 0 10px var(--colorA)) drop-shadow(0 0 15px var(--colorA
1.6K20发布于 2021-10-09 - 来自专栏Coco的专栏
【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
嗯哼，老读者一定也知道，这里我们需要对整个可见部分添加阴影，需要使用 filter:drop-shadow()。 drop-shadow() 滤镜的作用用于创建一个符合元素（图像）本身形状（alpha 通道）的阴影。其中，最为常见的技巧，就是利用它生成不规则图形的阴影。 因此，我们把上述的 box-shadow 替换成：filter: drop-shadow(0 0 5px #ddd)： 这样，我们就实现了基于单个不规则按钮的阴影效果。 但是，显然事情还没有结束。 修改布局结构，再借助利用 drop-shadow 实现统一阴影 记得我们上面提到过的 HTML 的布局吗？ : drop-shadow(0 0 5px #ddd) } // 右侧的主体 .g-main { filter: drop-shadow(0 0 5px #ddd) } 无论层级谁在上，整体阴影的展示都会瑕疵
32810编辑于 2024-04-19 - 来自专栏Coco的专栏
【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧
filter:drop-shadow 其实说到 box-shadow，就不得不提到另一个和它极为相似的 CSS3 新属性 filter:drop-shadow，filter 即是 CSS 滤镜，可以在元素呈现之前 当然这里我们只说 filter:drop-shadow。 filter:drop-shadow 也很好玩，本想继续长篇大论讨论下去，无奈发现 张鑫旭大神两篇文章已经把我想说的都囊括了，前人栽树，后人乘凉，我也就不再献丑了。 两篇非常值得一读的文章： CSS3 filter:drop-shadow滤镜与box-shadow区别应用 PNG格式小图标的CSS任意颜色赋色技术 另外 《CSS SECRET》（CSS揭秘 ）这本大作也对 filter:drop-shadow 有详细的描述，可以去看看。
2.6K50发布于 2018-05-28 - 来自专栏少年郎编程之路
iOS Safari 中的 CSS drop-shadow 渲染异常问题分析与解决方案
本文将深入分析 iOS Safari 中 CSS filter: drop-shadow() 属性的一个特殊渲染问题，并提供多种解决方案。 问题描述在 iOS Safari 中，当我们使用 CSS filter: drop-shadow() 结合 transform 或绝对定位将元素移出可视区域时，阴影效果可能会出现部分显示或完全不显示的情况 问题复现以下是一个简单的示例，这个示例期望使用展示了filter的drop-shadow选项生成一个和图片一样大小的红色图片。这段代码在安卓和PC上OK，在IOS的Safari下异常。 position-mode { width: 100%; height: 100%; display: block; position: absolute; top: -100px; filter: drop-shadow 100px 0px 0px rgba(255,0,0,1)); border-right: 100px solid transparent;}</style>结论iOS Safari 中的 CSS drop-shadow
94900编辑于 2025-03-14 - 来自专栏Cell的前端专栏
现代 CSS 解决方案之异形元素怎么设置阴影？
2 解决方法 可以使用 filter 属性的 drop-shadow 函数来给异形元素设置阴影。 drop-shadow 绘制的投影实际上是输入图像的 alpha 蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。 备注 这个函数有点类似于 box-shadow 属性。 box-shadow 属性在元素的整个框后面创建一个矩形阴影，而 drop-shadow() 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。 语法如下： 1 drop-shadow(offset-x offset-y standard-deviation color) 可以看出，drop-shadow 比 box-shadow 少了一个阴影的扩展半径 4 参考链接 drop-shadow() - CSS: Cascading Style Sheets | MDN
36510编辑于 2024-11-21 - 来自专栏Coco的专栏
CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框
drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow( (0 0 0.2px red) // 重复 N 次 drop-shadow(0 0 0.2px red) drop-shadow(0 0 0.25px blue) // 重复 N 次 drop-shadow(0 0 0.25px blue); } 效果如下： 然而，在不同屏幕下（高清屏和普通屏），drop-shadow
1.7K30发布于 2021-10-29 - 来自专栏HTML5学堂
重磅来袭！原来阴影可以这样玩？
4.3 Drop-shadow效果 通过box-shadow实现Drop-shadow效果是仅用一个div标签元素，然后配合其两个伪元素":before"和":after"；最后分别给其伪元素定位到div 具体我们来看其实现步骤： 1、先为定义了叫做"drop-shadow"的div设置一个基本的样式： .wrap .drop-shadow { position: relative; width ”和":after"定位到drop-shadow的下面，并且给drop-shadow的":before"和":after"加上阴影效果。 .drop-shadow:before, .drop-shadow:after { position: absolute; content: ""; left: 10px; .drop-shadow:before, .drop-shadow:after { position: absolute; content: ""; left: 10px;
2.5K50发布于 2018-03-13 - 来自专栏程序员成长指北
CSS filter 有哪些神奇用途
这个时候，filter 属性的 drop-shadow 方法就能很好的解决这个问题，用它添加的阴影可以穿透元素，而不是添加到元素的盒模型边框上。 drop-shadow 添加的阴影除了可以穿透透明元素外，阴影效果和 box-shadow 是相同的，如果浏览器支持硬件加速的话，使用 filter 添加的阴影效果会更加逼真。 drop-shadow 语法如下（它除了不支持设置 inset，其他和 box-shadow 是完全相同的）： filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); 如： filter: drop-shadow(1px 1px 15px rgba(0, 0, 0, .5)); 下图是分别使用 box-shadow 和 filter: drop-shadow 为透明元素添加阴影的对比 { box-shadow: 1px 1px 15px rgba(0, 0, 0, .5); } .drop-shadow { filter: drop-shadow(1px 1px 15px
1.7K20发布于 2021-07-08 - 来自专栏python3
CSS3 Filter 特效应用
可以较好的支持 下面来看看各种效果: 有以下几种效果可以使用 grayscale brightness hue-rotate invert opacity contrast saturate sepia drop-shadow /* drop-shadow 阴影 说明：和box-shadow有着相似的效果。 给图片添加阴影 drop-shadow(X轴 Y轴 阴影直径 阴影颜色); */ .drop-shadow{ -webkit-filter:drop-shadow(0px 5px 20px# --阴影效果-->
效果：
? 如:*/
/*一个包含图片模糊透明度以及有阴影的一个class*/
.blur-opacity-drop-shadow{
-webkit-filter:blur(30px) opacity(0.3) drop-shadow73320发布于 2020-01-14 - 来自专栏前端自习课
【CSS】526- CSS 控制图标颜色
合成雪碧图需要工作量；2.多了个图标，增加雪碧图的体积 方法3 CSS3投影---filter:drop-shadow(color, X-offset, Y-offset) color：投影的颜色 X-offset ：X轴偏移量 Y-offset：Y轴偏移量 drop-shadow：就好像光线照在元素上一样，元素里不透明的地方，光线无法穿透形成投影 (red 20px 0); filter: drop-shadow(red 20px 0); } ? (red 20px 0); filter: drop-shadow(red 20px 0); } ? 如果没有右侧边框，则元素完全处于不可见状态，drop-shadow不能生效（设想下，看不见的东西，自然没有投影） 优点：不需要额外的图标 缺点：需要两层DOM结构 方法4 background-blend-mode
2.2K20发布于 2020-03-19 - 来自专栏Coco的专栏
巧用 CSS 实现炫彩三角边框动画
即便使用 drop-shadow，也会被覆盖的内侧图形给遮挡住。 当然，CSS 还是可以实现这个图形的，本文就将讲解如何使用 CSS 实现上述炫彩三角边框动画。 添加上光影 最后一步就比较简单了，由于上述三角形已经是一个镂空图形，这里直接使用 drop-shadow 给元素加上一层光影效果即可，不过由于使用了 clip-path，直接在原元素上添加的 drop-shadow 无法展示，这个好解决，我们只需要多套一层结构，将 drop-shadow 添加到父元素上即可：
<div class="g-triangle (0 0 5px hsl(162, 100%, 58%)) <em>drop-shadow</em>(0 0 10px hsl(270, 73%, 53%)); } .g-triangle { width: 260px 生成不规则图形的光源及边框: 妙用 <em>drop-shadow</em> 实现线条光影效果 好了，本文到此结束，希望本文对你有所帮助 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新1.4K31编辑于 2022-03-10来自专栏前端进阶交流一篇文章带你了解CSS3 滤镜(Filters)——下篇
四、向图像添加阴影 可以使用该drop-shadow()功能将阴影效果应用于Photoshop等图像。 此功能类似于该box-shadow属性。 例： <style> img { width: 200px; height: 100px; } img.shadow { -webkit-filter: drop-shadow(2px 2px 4px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(2px 2px 4px orange); } img.shadow-large { -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(4px 注意：drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像该box-shadow属性一样，但有一个例外，' inset
89820发布于 2021-02-04来自专栏腾讯IMWeb前端团队什么? CSS 阴影竟然还有这种操作 !
但是对于单个元素而言， drop-shadow 的话就只能是一层。 好，上面的文字，我们试着叠加个 50 层文字阴影试一下。 本文假定读者已经了解了 drop-shadow 的基本用法，上图效果来自这里：CodePen Demo — Drop-shadow vs box-shadow (2) By Kseso：https:// 但是对于单个元素而言， drop-shadow 的话就只能是一层。 也就是说，无法在 div 上再使用 filter:drop-shadow() 生成另一侧的红色投影，不过还好，我们还有两个伪元素的 filter:drop-shadow() 以及 box-shadow filter:drop-shadow(14px 0 0 #fe2d52); }} 我们分别再利用 div 的 box-shadow 以及两个伪元素的 filter:drop-shadow() ，在单个标签的限制下
69221编辑于 2022-06-29来自专栏漫画前端什么? CSS 阴影竟然还有这种骚操作 ？
本文假定读者已经了解了 drop-shadow 的基本用法，上图效果来自这里：CodePen Demo — Drop-shadow vs box-shadow (2) By Kseso：https:// 好，接下来我们只需要再添加一层红色 filter:drop-shadow() 在右侧就大功告成！ 等等！ 但是对于单个元素而言， drop-shadow 的话就只能是一层。 也就是说，无法在 div 上再使用 filter:drop-shadow() 生成另一侧的红色投影，不过还好，我们还有两个伪元素的 filter:drop-shadow() 以及 box-shadow filter:drop-shadow(14px 0 0 #fe2d52); } } 我们分别再利用 div 的 box-shadow 以及两个伪元素的 filter:drop-shadow()
83730发布于 2020-12-16来自专栏算法与编程之美JavaScript|你不知道的CSS属性-Filter（滤镜）
具体内容 1滤镜属性简介 CSS滤镜的语法： filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale 滤镜参数的含义如下表： 参数名称 效果 blur() 设置图片的高斯模糊效果 brightness() 设置图片的明暗度效果 contrast() 设置图片的对比度 grayscale() 将图片转化为灰度图像 drop-shadow 图2.3 对比度滤镜效果 2.4 阴影（drop-shadow）滤镜 drop-shadow滤镜用于设置图像的阴影效果，使元素内容在页面上产生投影，从而实现立体的效果，其语法格式如下： arrayObject.length } .b{ -webkit-filter: drop-shadow(30px 30px 10px blue ); filter: drop-shadow(30px 30px 10px blue); }
1.6K20发布于 2020-03-26来自专栏web秀有趣的CSS小示例：好看的皮囊千篇一律，有趣的灵魂万里挑一
#0cc071; color: #fff; /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此时是伪类是没有阴影的*/ -webkit-filter: drop-shadow (.2em .2em .2em rgba(0,0,0,.5)); filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); } .speech { 从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？ ? 可以很明显的看出区别，为什么会这样呢？ 而drop-shadow就不一样了，他是把所有的非透明区域都做了阴影效果，就相当于一种真正的投影。 然后drop-shadow就不用去纠结IE能不能用了，因为我们已经放弃它了。
1.2K40发布于 2019-09-04来自专栏Coco的专栏英雄联盟比赛选手的六芒星能力图动画是如何制作的？
不规则边框的生成方案 这里，我们可以使用 drop-shadow()，大致实现一下这个效果，核心步骤： 通过叠加实现一个六边形图形 利用 drop-shadow() 实现边框效果 用动图演示一下，大概是这样 position: relative; width: 150px; height: 260px; background: #fff; filter: drop-shadow (0 0 .5px #333) drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333); &::before, 50% -50%; left: 50%; top: 50%; background: #fff; filter: drop-shadow (0 0 .5px #333) drop-shadow(0 0 .5px #333) drop-shadow(0 0 .5px #333);
1.1K10编辑于 2023-03-25来自专栏White feathe 的博客三种方式：object、embed、mask引用 Svg 并更改样式
/div> 更改颜色，大小可通过css处理 .item { overflow: hidden; object,embed { cursor: pointer; filter: drop-shadow (#000000 0px -100px); transform: translate(0px, 100px); } } PS：采用投影的方式将其改变色值， drop-shadow，须将父元素设置为
1.4K40编辑于 2022-04-21来自专栏前端进阶交流一篇文章带你了解CSS3 滤镜(Filters)——上篇
四、向图像添加阴影 可以使用该drop-shadow()功能将阴影效果应用于Photoshop等图像。 此功能类似于该box-shadow属性。 例： <style> img { width: 200px; height: 100px; } img.shadow { -webkit-filter: drop-shadow(2px 2px 4px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(2px 2px 4px orange); } img.shadow-large { -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(4px 注意：drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移，而第三个参数指定模糊半径，最后一个参数指定阴影颜色，就像该box-shadow属性一样，但有一个例外，' inset
84020发布于 2021-01-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号