|
1 <html> |
|
2 <head> |
|
3 <style type="text/css"> |
|
4 body { background-color: white; margin: 0; padding: 0; } |
|
5 div.mask { |
|
6 position: absolute; |
|
7 width: 10px; |
|
8 height: 10px; |
|
9 background-color: white; |
|
10 } |
|
11 div.tr { |
|
12 right: 10px; |
|
13 } |
|
14 div.tl { |
|
15 left: 10px; |
|
16 } |
|
17 div.bl { |
|
18 left: 10px; |
|
19 margin-top: 20px; |
|
20 } |
|
21 div.br { |
|
22 right: 10px; |
|
23 margin-top: 20px; |
|
24 } |
|
25 p { |
|
26 margin: 10px; |
|
27 padding: 0; |
|
28 border: 10px solid rgb(227, 207, 187); |
|
29 height: 10px; |
|
30 } |
|
31 p.groove, p.ridge { |
|
32 border-width: 5px; |
|
33 height: 20px; |
|
34 } |
|
35 p.groove > span, p.ridge > span { |
|
36 border: 5px solid; |
|
37 margin: 0; |
|
38 padding: 0; |
|
39 display: block; |
|
40 height: 10px; |
|
41 } |
|
42 p.inset, p.groove, p.ridge > span { |
|
43 border-color: rgb(182, 171, 160) rgb(246, 240, 234) rgb(246, 240, 234) rgb(182, 171, 160); |
|
44 } |
|
45 p.outset, p.ridge, p.groove > span { |
|
46 border-color: rgb(246, 240, 234) rgb(182, 171, 160) rgb(182, 171, 160) rgb(246, 240, 234); |
|
47 } |
|
48 </style> |
|
49 </head> |
|
50 <body> |
|
51 <p style="border-style: solid;"> </p> |
|
52 <p style="border-style: dashed;"> </p> |
|
53 <!-- <p style="border-style: dotted;"> </p> --> |
|
54 <p style="border-style: double;"> </p> |
|
55 <div class="mask tr"></div> |
|
56 <div class="mask bl"></div> |
|
57 <p class="ridge"><span> </span></p> |
|
58 <div class="mask tr"></div> |
|
59 <div class="mask bl"></div> |
|
60 <p class="groove"><span> </span></p> |
|
61 <div class="mask tr"></div> |
|
62 <div class="mask bl"></div> |
|
63 <p class="inset"> </p> |
|
64 <div class="mask tr"></div> |
|
65 <div class="mask bl"></div> |
|
66 <p class="outset"> </p> |
|
67 </body> |
|
68 </html> |