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>

 

posted @ 2017-08-31 19:20  wingzw  阅读(173)  评论(0)  编辑  收藏  举报