CSS3權威指南 28.CSS3的其餘重要樣式和屬性

時間 2019-12-10

標籤 css3 css 權威指南 28.css3 其餘重要樣式屬性欄目 CSS 简体版

原文原文鏈接

 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>