邀朋友种豆,一起分享吧
喜欢购买正品行货?那就去品牌街

CSS滤镜语法

来自:种豆 时间:2017-12-29 阅读:581次 原文链接

CSS滤镜是什么

CSS滤镜是对常规的CSS的一个扩展子集,可以使应用对象(文字,图片,HTML元素)产生类似于PHOTOSHOP中的模糊,通透,边缘发光等效果。合理的使用CSS滤镜,可以减少网页使用图片的数量,从而减少网页大小;也可以通过直接修改CSS中滤镜的参数或者用JS动态的修改CSS滤镜参数,从而达到快速更新页面的效果。CSS滤镜丰富了网页作为多媒体向用户提供丰富多彩的资讯内容的展现方式。

CSS滤镜语法

filter:filtername(fparameter1, fparameter2...)

其中:Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数

怎样同时使用多个滤镜?

filter : 要使用的滤镜效果。多个滤镜之间用空格隔开。

设置或检索对象所应用的滤镜或滤镜集合。

CSS滤镜适用对象

此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
若要在 img 对象上应用 shadow 滤镜,可以在该对象 img 对象的父容器上应用。
 
滤镜的机制是可扩展的。通过利用Microsoft? DirectX? Media SDK,你可以使用C 开发和使用第三方滤镜。
该属性在MAC平台上不可用。

如何应用CSS滤镜

1、先定义好CSS,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可
2、直接在支持CSS滤镜效果的HTML控件元素上编写CSSfilter代码。

常用的CSS滤镜

请参照《Css的14种滤镜详解

滤镜示例

div { width:200px; filter:blur(strength=50) flipv() ; }
img { filter: invert(); }
input.aFilter {filter: alpha(opacity=50);}
div { width:200px; filter:redirect ; }
.aFilter {background-color: #FFFFFF; filter: light(); color: #000000; width: 150;}
div.aFilter {filter: glow(Color=blue,Strength=5); width: 150;}
div.aFilter {filter: shadow(color=#0000FF,direction=45); width: 150; color: FF0000;}

 
关于种豆 ┊ 联系我们 ┊ 免责声明 ┊ 发帖须知 ┊ 请提意见 ┊ 站点地图
本站为个人爱好兴趣分享网站,不代表本人观点,如有侵权请联系QQ3371650278进行处理
sowsoy.com 版权所有 Copyright©2010-2020 浙ICP备10212932号
Email:sowsoy#hotmail.com