-webkit-filter用法

最新推荐文章于 2021-08-03 19:20:11 发布

weixin_34331102

最新推荐文章于 2021-08-03 19:20:11 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/touyi/blog/182338

本文介绍了W3C制定的CSS滤镜效果规范CSS Filter Effects 1.0，并列举了当前支持的各种滤镜效果，包括灰度、褐色、饱和度调整等。文章还提供了使用示例。

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

为什么80%的码农都做不了架构师？>>>

这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。

现在规范中支持的效果有：

grayscale 灰度

sepia 褐色

saturate 饱和度

hue-rotate 色相旋转

invert 反色

opacity 透明度

brightness 亮度

contrast 对比度

blur 模糊

drop-shadow 阴影

用法是标准的CSS写法：

-webkit-filter: blur(2px);

转载于:https://my.oschina.net/touyi/blog/182338

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34331102

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

-webkit-linear-gradient线形渐变详解

dixianqian6620的博客

05-28

2293

　　CSS3发布很久了，现在在国外的一些页面上常能看到他的身影，这让我羡慕已久，只可惜在国内为了兼容IE，让这一项技术受到很大的限制，很多Web前端人员都望而止步。虽然如此但还是有很多朋友在钻研CSS3在web中的应用，为了不被淘汰，我也开始向CSS3进发，争取跟上技术的前沿。从现在开始我会不断的发布一些CSS3的应用，和大家一起分享，今天我们首先要看的就是:CSS3： Gradient...

背景毛玻璃效果 css,CSS backdrop-filter实现背景毛玻璃效果

weixin_33400830的博客

08-03

1473

CSS背景滤镜backdrop-filter有人说backdrop-filter和filter的语法类似。错！不是类似，是一模一样，如出一辙，毫无二致。看下面的对比表：backdrop-filter语法filter语法/* 关键字值 */backdrop-filter: none;/* URL方式外链SVG filter */backdrop-filter: url(zxx.svg#filter)...

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

CSS3 滤镜 webkit-filter详细介绍及使用方法

01-19

大家可能对Instagram 这款iPhone APP 上的滤镜效果很感兴趣，其实 CSS3 开始也有滤镜（不是 IE 的那种滤镜），这些滤镜效果最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，Webkit 率先支持了它。 -webkit-filter 的用法 -webkit-filter 用法是标准的 CSS 写法，如：复制代码代码如下:-webkit-filter: blur(2px); -webkit-filter 支持的效果有：blur 模糊 brightness 亮度 contrast 对比度 drop-s

css3属性 -webkit-filter

weixin_34334744的博客

09-20

401

　　-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有： grayscale 灰度值为0-1之间的小数 sepia 褐色　　　　　　值为0-1之间的小数 saturate 饱和度　　　　值为num hue-rotate 色相旋转　...

-webkit-filter

社会人

11-13

886

wyy2018 -webkit-filter -webkit-filter：CSS滤镜属性。可以在元素呈现之前，为元素渲染提供效果。常用于图像、背景、边框的渲染。语法： ele{ -webkit-filter: none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opac...

那个css属性可以代替 -webkit-box-reflect: below 1px linear-gradient (transparent,#0004);

最新发布

10-03

为了达到类似的效果，你可以使用 CSS3 的 `background-image` 和 `mask-image` 或者 `::backdrop-filter` 来实现。这里是一个等效的替换方案： ```css /* 使用 background-image 和 gradient */ background-image: ...

css3 -webkit-filter

weixin_30900589的博客

04-06

121

　-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选： grayscale 灰度值为0-1之间的小数 sepia 褐色　　　　　　值为0-1之间的小数 saturate...

CSS-滤镜 -webkit-filter

weixin_33738982的博客

11-08

180

如同ps般的css属性-webkit-filter

weixin_43895402的博客

05-20

659

-webkit-filter 楼主不易，转载声明首先，我们先来看一下-webkit-filter是什么？如下： -webkit-filter有什么用 -webkit-filter的语法结构 -webkit-filter的可选属性 -webkit-filter效果一览 -webkit-filter代码示例那么让我么一起走进css的神奇世界吧 -webkit-filter有什么用 ...

filter css w3c,CSS3 滤镜 -webkit-filter 的介绍和使用

weixin_29624785的博客

08-03

290

大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣，其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜)，这些滤镜效果最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，Webkit 率先支持了它。-webkit-filter 的用法-webkit-filter 用法是标准的 CSS 写法，如...

-webkit-filter是神马?

weixin_30668887的博客

10-16

115

这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。现在规范中支持的效果有： - grayscale 灰度 - sepia 褐色 - saturate 饱和度 - hue-rotate 色相旋转 - invert 反色 - opacity 透明度 - brightness 亮度...

-webkit-filter属性用来干什么

weixin_33701251的博客

08-13

169

这两天有看到国外网站纷纷介绍-webkit-filter，开始很迷惑，丫是想要学IE吗？今天看了下，和IE的滤镜没一毛关系啊，而且，效果很赞！这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。现在规范中支持的效果有： grayscale 灰度 sepia 褐色 saturate 饱和度 h...

滤镜-webkit-filter的妙用之处

weixin_30696427的博客

08-21

174

我们可能对 Instagram 这款 iPhone APP 上的滤镜作用很感兴趣，本来 CSS3 开端也有滤镜（不是 IE 的那种滤镜），这些滤镜作用最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后拟定了 CSS Filter Effects 1.0 的规范，Webkit 率先支撑了它。 -webkit-filter 的用法 -webkit-filter 用法是规范的 CSS 写...

使用-webkit-filter的blur属性，做个人主页头像

zhangqling的博客

08-13

718

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人主页</title> <style> .box{ width: 720px; height: 400px;

html图片模糊效果,css3 filter属性给图片添加毛玻璃模糊效果

weixin_33451125的博客

06-03

870

记录下项目中关于图片模糊效果的处理，要求：背景图必须通过img标签传入，而且头像要做成圆形的示例图片：HTML代码：吕良伟13218888888CSS代码：/*背景图模糊效果*/.imgBground{width:100%;height:28vh;filter:url(blur.svg#blur);/*FireFox,Chrome,Oper...

CSS3滤镜webkit-filter详解：打造Instagram风格效果

"本文将详细介绍CSS3中的webkit-filter属性，以及如何使用这些滤镜效果来实现类似Instagram的视觉效果。CSS3滤镜是基于SVG滤镜技术，由W3C制定并在Webkit浏览器中得到初步支持。" 在CSS3中，`-webkit-filter`是一个...