CSS3 滤镜filter: blur()高斯模糊的应用

html-css020

CSS3 滤镜filter: blur()高斯模糊的应用,第1张

filter 属性定义了元素(通常是img)的可视效果(例如:模糊与饱和度)。

语法:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()

使用效果: 查看demo

demo 是我的GitHub主页,当鼠标放在圆形上面的时候,圆形会旋转,这里主要应用了 animation 属性。而绿色圆形的下面那层投影的模糊效果则是运用了下面这条属性:

而完整卡片又该怎么写呢?

首先是它的 <html>结构:

CSS样式:

圆角背景:

圆形样式:

投影层的样式:

文字的样式:

如此,便可不用一张图,写出这张卡片了。

您好,我来为您解答:

不支持IE6, IE7, IE8,其它主流的浏览器都支持的。

CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

如果我的回答没能帮助您,请继续追问。

这种东西应该是ie里面独有的东西。其他浏览器本来就不支持。也不是css里面的东西。

css3里面有个opacity,为了兼容ie可能需要添加 filter:alpha(opacity:70)之类的。