CSS3权威指南 28.CSS3的其他重要样式和属性

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: grayscale(100%);
18             -webkit-filter: grayscale(100%);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: sepia(100%);
18             -webkit-filter: sepia(100%);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: saturate(250%);
18             -webkit-filter: saturate(250%);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: hue-rotate(90deg);
18             -webkit-filter: hue-rotate(90deg);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: invert(100%);
18             -webkit-filter: invert(100%);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: opacity(50%);
18             -webkit-filter: opacity(50%);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: contrast(200%);
18             -webkit-filter: contrast(200%);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: blur(2px);
18             -webkit-filter: blur(2px);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <style type="text/css">
 8         div{
 9             display: flex;
10             flex-direction: row;
11         }
12         figure{
13             width: 50%;
14             text-align: center;
15         }
16         figure:nth-child(2){
17             filter: drop-shadow(4px -4px 6px purple);
18             -webkit-filter: drop-shadow(4px -4px 6px purple);
19         }
20     </style>
21 </head>
22 
23 <body>
24    <div>
25        <figure>
26            <img src="worker.png" alt="">
27            <figcaption>原始图片</figcaption>
28        </figure>
29        <figure>
30            <img src="worker.png" alt="">
31            <figcaption>使用灰度图片</figcaption>
32        </figure>
33    </div>
34 
35 </body>
36 
37 </html>

相关阅读:
开车旅行（codevs 1199）
云serverlinux又一次挂载指定文件夹（非扩充）
百度之星资格赛 hdu 4826 Labyrinth 动态规划
 Linux下基于源代码方式安装MySQL 5.6
ACM-最短路之中的一个个人的旅行——hdu2066
新辰：共享是SEO的思维用户是SEO的核心
 servlet中生成验证码
 Linux ls 排序
 我想要得那块牌—记烟台大学第一届"ACM讲堂"
coocs2d-html5在使用cocoseditor时调用设备的accelerometer来使用重力感应
原文地址：https://www.cnblogs.com/wingzw/p/7460070.html