1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Flying Saucer: CSS Borders Support</title>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
<style>
body {
font-family: tahoma, verdana, arial;
}
#fslogo {
border-style: none;
text-decoration: none;
font-family: tahoma, verdana, arial;
font-size: 20pt;
font-weight: bold;
margin: 0pt;
padding: 0pt;
margin-bottom: 10pt;
}
#pagebyline {
border-style: none;
font-family: tahoma, verdana, arial;
font-size: 16pt;
}
div.sample {
width: 200px;
font-family: monospace;
font-size: 0.9em;
background-color: #efefff;
padding: 10px;
margin: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
border-color: maroon;
}
#dashed { border-style: dashed; border-width: 1px; }
#dotted { border-style: dotted; border-width: 1px; }
#inset { border-style: inset; border-width: 2px; }
#outset { border-style: outset; border-width: 2px; }
#ridge { border-style: ridge; border-width: 2px; }
#groove { border-style: groove; border-width: 2px; }
#double { border-style: double; border-width: 2px; }
#two_sided { border-style: dashed solid dashed solid; border-width: 2px; }
#three_sided { border-style: dashed solid dotted solid; border-width: 2px; }
#four_sided { border-style: dashed solid dotted ridge; border-width: 4px; }
#one_color { border-style: solid; border-color: red; border-width: 4px; }
#two_color { border-style: solid; border-color: red black; border-width: 4px; }
#three_color { border-style: solid; border-color: red blue black; border-width: 4px; }
#four_color { border-style: solid; border-color: red blue black green; border-width: 4px; }
</style>
</head>
<body>
<p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
<p class="link right-link"><a href="demoNav:forward">Next Page</a></p>
<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
<span id="pagebyline">
<span id="dotted">CSS</span>
<span id="double">Border</span>
<span id="dashed">Support</span>
</span><br />
<p><b>Border support includes</b>: CSS border styles, colors, width, on any or all four sides of a box. You can apply both border shorthand "border: 1px solid black") or individual border properties ("border-style: dashed") to all sides or to individual sides. Shorthand expansion allows you to specify properties for one, two, three or four sides, in any order. To make the border samples easier to see, we've colored the background. Note that some border effects only show properly with a larger border width.</p>
<br />
<table style="width: 100%" cellspacing="2" cellpadding="2">
<tr>
<td>
<div class="sample">1px solid border</div>
</td>
<td>
<div id="dashed" class="sample">1px dashed</div>
</td>
</tr>
<tr>
<td>
<div id="dotted" class="sample">1px dotted</div>
</td>
<td>
<div id="inset" class="sample">4px inset</div>
</td>
</tr>
<tr>
<td>
<div id="outset" class="sample">4px outset</div>
</td>
<td>
<div id="ridge" class="sample">4px ridge</div>
</td>
</tr>
<tr>
<td>
<div id="groove" class="sample">4px grooved</div>
</td>
<td>
<div id="double" class="sample">4px double</div>
</td>
</tr>
<tr>
<td>
<div id="two_sided" class="sample">2px different</div>
</td>
<td>
<div id="three_sided" class="sample">2px three different</div>
</td>
</tr>
<tr>
<td>
<div id="four_sided" class="sample">2px four different</div>
</td>
<td>
<div id="one_color" class="sample">2px red</div>
</td>
</tr>
<tr>
<td>
<div id="two_color" class="sample">2px two colors</div>
</td>
<td>
<div id="three_color" class="sample">2px three colors</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="four_color" class="sample">2px four colors</div>
</td>
</tr>
</table>
</body>
</html>
|
