• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Shadows</title>
7
    <style>
8
        div {
9
            background-color: lightgray;
10
            height: 50px;
11
            width: 200px;
12
            margin: 30px;
13
        }
14
        #shadow_01 { box-shadow: 5px 5px; }
15
        #shadow_02 { box-shadow: 5px 5px orange; }
16
        #shadow_03 { box-shadow: 5px 5px 10px; }
17
        #shadow_04 { box-shadow: 0 0 15px red; }
18
        #shadow_05 { box-shadow: 5px 5px 10px black, 0 0 15px purple, 0 0 30px maroon; }
19
    </style>
20
    </head>
21
​
22
    <body>
23
​
24
        <div id="shadow_01">검정색 그림자 효과</div>
25
        <div id="shadow_02">색상 그림자 효과</div>
26
        <div id="shadow_03">흐린 그림자 효과</div>
27
        <div id="shadow_04">네온 효과</div>
28
        <div id="shadow_05">그림자 중첩 효과</div>
29
​
30
    </body>
31
​
32
    </html>