CSS3滤镜
2016-07-17 15:17
435 查看
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 img { 6 width: 33%; 7 height: auto; 8 float: left; 9 max-width: 235px; 10 } 11 12 .blur {-webkit-filter: blur(4px);filter: blur(4px);} 13 .brightness {-webkit-filter: brightness(250%);filter: brightness(250%);} 14 .contrast {-webkit-filter: contrast(180%);filter: contrast(180%);} 15 .grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} 16 .huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} 17 .invert {-webkit-filter: invert(100%);filter: invert(100%);} 18 .opacity {-webkit-filter: opacity(50%);filter: opacity(50%);} 19 .saturate {-webkit-filter: saturate(7); filter: saturate(7);} 20 .sepia {-webkit-filter: sepia(100%);filter: sepia(100%);} 21 .shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);} 22 </style> 23 </head> 24 <body> 25 26 <p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p> 27 28 <img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 29 <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 30 <img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 31 <img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 32 <img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 33 <img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 34 <img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 35 <img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 36 <img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 37 <img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 38 <img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300"> 39 40 </body> 41 </html>
相关文章推荐
- CSS中的line-height百分比
- CSS基础课程笔记
- html css float left与 float right的使用说明
- CSS3选择器详解实例说明
- CSS基本使用复习(1)
- phpcmsV9调用默认的分页样式
- div+css简单布局
- CSS的经验
- css3 2D,详解
- CSS重写Button的图片
- CSS中line-height和height的区别
- CSS中几种颜色的表示方法
- CSS中文字大小的pt、px的区别详解
- pt, px,em,ex,in等这类长度单位(转贴)
- css(3)
- css中的@符号的用处
- css(2)
- CSS(1)
- 你未必知道的CSS故事:揭开leading的面纱
- css游戏