CSS3 filter属性学习

filter属性：
CSS3的fliter属性是一个强大的工具，开发者可用它实现很多视觉效果
。该属性提拱了如阴影和改变颜色等效果，这些效果的在元素渲染是完成
。该属性通常用于调整图片的呈现、一个元素的背景或者边框。

语法：

.filter-me{filter:<filter-function>[filter-function] *|none}

filter函数有以下一些：

blur(Npx)——设置高斯模糊，传入一个像素单位，表示模糊半径，默认
值为0，没有模糊，不可取百分数。

brightness()——设置亮度，0% 使元素变成黑色，默认值为100%，不改
变亮度，可以超过100%,表示加亮。

contrast()——设置颜色对比度，0%使元素变成黑色，默认值为100%,不
改变，可以超过100%。

drop-shadow(<length>{2,3},<color>?)——设置阴影背景，前三个参
数表示水平偏移、垂直偏移和阴影半径，颜色是阴影颜色。

grayscale()——设置灰度，参数表示灰色的占比，0%不改变，默认值为
100%，完全灰色。负值不可用。

hue-rotate()——色相旋转，参数是一个角度，默认参数为0deg表示色
相不旋转，最大为360deg。（色相是啥子？？）

invert()——设置反色，0%表示和不设置效果一样，默认值为100%表示
完全翻转，100%可模拟交卷底片。不可取负值。

opacity()——设置透明度，默认值为 1 ,表示不透明。这个和 opacity
属性类似，不同之处是一些浏览器为filter提供硬件加速。不可取负值
。
saturate()——设置饱和度，0%表示完全不饱和，100%表示不改变饱和
度，超过100%表示超饱和，负值不可取。

sepia()——设置复古程度，0%表示不改变，默认值为100%，表示完全复
古。负值不允许。

url()——用 SVG 设置 filters

custom()——还未实现该方法。

可用多个函数，以空格分割，如果传入的参数非法，函数将返回 none,
参数可以是百分数，也可以是十进制小数。特别注意，grayscale()函
数用在 sepia()后面捡导致完全灰色的输出。目标元素的任何一部分都
被filter影响，包括 content、background、border、text-
decoration、outline、滚动条和后代元素。filter也可用于行内元素。
eg span。

参考文章：filter Quick Fun: CSS3 Filter Effects

CSS3 Filter的十种特效

点击看更多 filter效果 cssreflex

转载于:https://www.cnblogs.com/jackzhoumine/p/6618678.html

CSS3 filter属性学习相关推荐

使用css3 filter属性实现图片毛玻璃效果
可用于背景图片的遮盖和虚化处理: img {filter: url(blur.svg#blur);/* FireFox, Chrome, Opera */-webkit-filter: blur(5p ...
CSS3 排版属性盒子模型第二个模块
第05章-CSS3排版属性 CSS3排版属性第05章-CSS3排版属性学习目标 CSS 列表案例01 CSS 隐藏隐藏元素 CSS 显示属性案例03 CSS 表格案例04 表格隔行色案例 ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊二.brightnes ...
css3 filter url,CSS3 filter(滤镜) 属性
CSS3 filter(滤镜) 属性实例修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safa ...
页面中的黑白滤镜css3，filter属性
在平常开发中遇到一些特殊节日的话会有一些滤镜效果,而这些效果可以使用一个css3的属性进行完成, 他就是filter属性属性值 filter: none | blur() | brightness( ...
css3滤镜属性filter实现网页变黑白效果
前言在特殊的日子里,很多网站页面都是黑白色的,其实用css3滤镜属性filter让网页马上变黑白,一行代码就搞定. 网页变黑白代码实现方法1:在你的css里加上以下代码即可,网页马上变黑白: ht ...
巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
css3的filter属性使用——全局滤镜
清明节看到百度.csdn等网站.纷纷一片黑,好奇怎么快速实现的? 趴了一下源码,其实实现的很简单,直接全局html上加个灰白色滤镜属性即可. html{-webkit-filter: graysca ...
Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果
css3过渡属性: 属性描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...

CSS3 filter属性学习

CSS3 filter属性学习相关推荐

最新文章

热门文章