CSS 属性 filter 滤镜的使用

moonlit1228

于 2011-03-30 16:53:00 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： filter css

本文链接：https://blog.csdn.net/moonlit1228/article/details/6289307

本文介绍了使用HTML样式属性实现的几种滤镜效果，包括发光、模糊、水平翻转、垂直翻转、阴影及波浪等，并强调了为元素设置宽度的重要性。

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

代码如下：

<h2 style="filter:glow()" mce_style="filter:glow()">发光</h2> <h2 style="filter:blur()" mce_style="filter:blur()">模糊</h2> <h2 style="filter:fliph()" mce_style="filter:fliph()">Flip H</h2> <h2 style="filter:flipv()" mce_style="filter:flipv()">Flip V</h2> <h2 style="filter:shadow()" mce_style="filter:shadow()">阴影</h2> <h2 style="filter:dropshadow()" mce_style="filter:dropshadow()">阴影</h2> <h2 style="filter:wave(Strength=2)" mce_style="filter:wave(Strength=2)">波浪</h2> <p>注释：如果元素的 width 属性没有设置，那么滤镜不会起作用。</p>

注释：如果元素的 width 属性没有设置，那么滤镜不会起作用。

效果： http://www.w3cschool.cn/t0625.html?f=dhtm_filter

因为元素的width没有设置的话，滤镜会不起作用，所以不要忘了给h2设个宽。

<head> <mce:style></mce:style><style mce_bogus="1">h2 { width:100%; }</style> </head>