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之间的小数
- brightness 亮度 值为0-1之间的小数
- contrast 对比度 值为num
- blur 模糊 值为length
- drop-shadow 阴影
用法是标准的CSS写法,如:
-webkit-filter: blur(2px);
css3 -webkit-filter的更多相关文章
- CSS3的filter用法
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...
- 学习笔记:CSS3的filter属性
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...
- CSS3 滤镜Filter亮度动画
CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...
- CSS3 之filter毛玻璃效果弹窗
先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- css3中filter的各种特效
css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效). 浏览器兼容性 目前各大浏览器对于css3的兼容已经非常好了,最新 ...
- 关于css3 中filter的各种特效
做项目时遇到了一个有趣的css特效. 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了. 现在规范中 ...
- 一个非常有意思的css3属性filter
filter这属性貌似可以是img图片在黑白与彩色间转换 filter:grayscale(1)为黑白色,filter:grayscale(0)位彩色,可以用于hover效果 img:hover{fi ...
- css3整理--filter
只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filt ...
- CSS3滤镜filter浅析
在实现特定显示效果的页面中,css的filter属性是一种强大的工具.它能让我们的页面更加地个性化并减少PS方面的工作.filter的属性值主要有以下十种: blur grayscale sepia ...
- css3滤镜Filter使用
Filter主要用于图片,SVG等元素上,其默认值是none,有以下10个filter-function值可选: grayscale(灰度)效果类似于PS中的去色或者黑白 blur(模糊)效果类似于P ...
随机推荐
- 274. H-Index论文引用量
[抄题]: Given an array of citations (each citation is a non-negative integer) of a researcher, write a ...
- 15-Call to your teacher(有向图的连通判断)
链接:https://www.nowcoder.net/acm/contest/76/F来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 32768K,其他语言65536K ...
- Java中的并发工具类:CountDownLatch、CyclicBarrier和Semaphore
在java 1.5中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如CountDownLatch,CyclicBarrier和Semaphore,今天我们就来学习一下这三个辅助类的用法. 一. ...
- list count++
AtomicInteger count = customTypeCounter.get(order.getCustomerType()); if (count == null) { count = n ...
- 在linux下设置定时任务
输入命令 crontab -l(列出当前有哪些定时任务)crontab -e(修改这些任务)然后编辑:添加定时任务(编辑命令是vi编辑器的,tips:i,insert;:wq,保存并退出)格式:* * ...
- oracle sql 数结构表id降序
UPDATE BAS_ORGANIZATION_TYPE T1SET T1.PARENTID=(select rn from (SELECT id,rownum rn FROM BAS_ORGANIZ ...
- ubuntu虚拟机安装简单pxe服务器
安装环境: vmware2台虚拟机,一台用来做pxe服务器(安装tftp.dhcp.apache2等服务),另一台用来做安装测试. 虚拟机的网络配置:dhcp的虚拟网络为192.168.10.100/ ...
- MySQL闪退
把配置文档的如图位置打开
- 使用Word2016发布CSDN博客
目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...
- zrender源码分析2--初始化Storage
接上次分析到初始化ZRender的源码,这次关注内容仓库Storage的初始化 入口1:new Storage(); // zrender.js /** * ZRender接口类,对外可用的所有接口都 ...