• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Radial Gradients</title>
7
    <style>
8
        div {
9
            height: 300px;
10
            width: 300px;
11
        }
12
        #grad_01 {
13
            background: red;
14
            background: -webkit-radial-gradient(35% 35%, closet-side, red, yellow, orange);
15
            background: -moz-radial-gradient(35% 35%, closet-side, red, yellow, orange);
16
            background: -o-radial-gradient(35% 35%, closet-side, red, yellow, orange);
17
            background: radial-gradient(closest-side at 35% 35%, red, yellow, orange);
18
        }
19
        #grad_02 {
20
            background: red;
21
            background: -webkit-radial-gradient(35% 35%, farthest-side, red, yellow, orange);
22
            background: -moz-radial-gradient(35% 35%, farthest-side, red, yellow, orange);
23
            background: -o-radial-gradient(35% 35%, farthest-side, red, yellow, orange);
24
            background: radial-gradient(farthest-side at 35% 35%, red, yellow, orange);
25
        }
26
        #grad_03 {
27
            background: red;
28
            background: -webkit-radial-gradient(35% 35%, closet-corner, red, yellow, orange);
29
            background: -moz-radial-gradient(35% 35%, closet-corner, red, yellow, orange);
30
            background: -o-radial-gradient(35% 35%, closet-corner, red, yellow, orange);
31
            background: radial-gradient(closest-corner at 35% 35%, red, yellow, orange);
32
        }
33
        #grad_04 {
34
            background: red;
35
            background: -webkit-radial-gradient(35% 35%, farthest-corner, red, yellow, orange);
36
            background: -moz-radial-gradient(35% 35%, farthest-corner, red, yellow, orange);
37
            background: -o-radial-gradient(35% 35%, farthest-corner, red, yellow, orange);
38
            background: radial-gradient(farthest-corner at 35% 35%, red, yellow, orange);
39
        }
40
    </style>
41
</head>
42
​
43
<body>
44
​
45
    <h1>원형 그래디언트 - 크기 설정</h1>
46
​
47
    <h3>closet-side</h3>
48
    <div id="grad_01"></div>
49
    <h3>farthest-side</h3>
50
    <div id="grad_02"></div>
51
    <h3>closet-corner</h3>
52
    <div id="grad_03"></div>
53
    <h3>farthest-corner</h3>
54
    <div id="grad_04"></div>
55
​
56
</body>
57
​
58
</html>