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>
