css3属性之filter初探

【css3属性之filter初探】的更多相关文章

css3属性之filter初探

filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性: img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 这段代码可以让图片编程黑白,grayscale: 灰度,灰度模式: img { -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */ filt…

CSS3的滤镜filter属性

css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊二.brightness(%)亮度三.contrast(%)对比度四.drop-shadow()阴影注意: 这个 drop-shadow 与 box-shadow 都是在说阴影,但还是有区别的,看下图图中火焰的图片,是一张png图片,除了火焰以外,其他部分是透明的,我们能看见,box-shadow 是给整个图片加…

关于css3属性filter

今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了filter滤镜这个属性. // 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 其中还有毛玻璃属性:blur // 图片使用高斯模糊效果: img { -webkit-filter: blur(5px); /* Chrome…

css3属性兼容性

来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-border-radius: 10px;/*moz内核浏览器*/ border-radius:20px;/*直接支持css3圆角属性的浏览器(如IE10)*/ }/*配合js使用*/ /…

css3属性 -webkit-filter

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

如何处理CSS3属性前缀

今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin. 姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性.也这样让我在思考,那么有了 Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不…