PHP-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<title>CSS3 Testcase</title>
<style type="text/css">
/* <![CDATA[ */
body { background-color: gray; margin: 0; }
h1 { margin: 2%; }
h1::before { content: '→ '; }
h1::after { content: ' ←'; }
pre { margin: 2%; width: auto; }
span { display: block; color: red; }
div.header {
margin: 1%;
width: auto;
height: auto;
border: none;
padding: 30px 30px 30px 30px;
/* Vertical-Left, Vertical-Right, Horizontal-Top, Horizontal-Bottom */
background-image: url('./corner.png'), url('./corner.png'), url('./corner.png'), url('./corner.png'), url('./v-left.png'), url('./v-right.png'), url('./h-top.png'), url('./h-bottom.png');
background-position: top left, top right, bottom left, bottom right, top left, top right, top center, bottom center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x;
/* KHTML Konqueror >= 3.5.4 */
-khtml-background-clip: border, border, border, border, border, border, border, border;
-khtml-background-origin: padding, padding, padding, padding, padding, padding, padding, padding;
-khtml-background-size: 27px 27px, 27px 27px, 27px 27px, 27px 27px, 27px 1px, 27px 1px, 1px 27px, 1px 27px;
background-color: #FFFFFF;
}
/* ]]> */
</style>
</head>
<body>
<h1>KHTML 3.5.4 CSS3 Background Implementation</h1>
<div class="header">
<div class="txt">
free scalable background image style. <a href="http://www.w3.org/TR/css3-background">CSS3 Background Reference</a>
<span>
Note that if 'background-clip' is 'padding', 'background-origin' is 'border', and 'background-position' is 'top left' (the initial value), then the top left of the background image will be clipped.
</span>
</div>
</div>
</body>
</html>
Lesezeichen