Hallo Lucina
Hier habe ich den erwähnten Code
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-image</title>
<style>
body {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 150%;
}
div {
margin: 30px;
float: left;
}
#eins {
border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */
width: 320px;
-moz-border-image: url(rahmenbild.gif) 60 stretch;
-webkit-border-image: url(rahmenbild.gif) 60 stretch;
-o-border-image: url(rahmenbild.gif) 60 stretch;
border-image: url(rahmenbild.gif) 60 stretch;
border-width: 60px;
}
#zwei {
border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */
width: 320px;
-moz-border-image: url(rahmenbild.gif) 60 round ;
-webkit-border-image: url(rahmenbild.gif) 60 round ;
-o-border-image: url(rahmenbild.gif) 60 round ;
border-image: url(rahmenbild.gif) 60 round ;
border-width: 60px;
}
#drei {
border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */
width: 320px;
-moz-border-image: url(rahmenbild.gif) 60 repeat ;
-webkit-border-image: url(rahmenbild.gif) 60 repeat ;
-o-border-image: url(rahmenbild.gif) 60 repeat ;
border-image: url(rahmenbild.gif) 60 repeat ;
border-width: 60px;
}
#vier {
/* Im Frühsommer 2011 noch nicht von den Browsern unterstützt */
border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */
width: 320px;
-moz-border-image: url(rahmenbild.gif) 10 10 10 10 space ;
-webkit-border-image: url(rahmenbild.gif) 60 space ;
-o-border-image: url(rahmenbild.gif) 60 space ;
border-image: url(rahmenbild.gif) 21 21 21 21 space ; /* Diese Option find ich nirgends */
border-width: 60px;
}
#fuenf {
border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */
width: 320px;
-moz-border-image: url(rahmenbild.gif) 60 stretch round ;
-webkit-border-image: url(rahmenbild.gif) 60 stretch round;
-o-border-image: url(rahmenbild.gif) 60 stretch round;
border-image: url(rahmenbild.gif) 60 stretch round;
border-width: 60px;
}
#sechs {
border-style:solid; /* hinzugefügt am 26.01.2013 17:18:45 */
width: 320px;
-moz-border-image: url(rahmenbild.gif) 90 80 80 90 stretch ;
-webkit-border-image: url(rahmenbild.gif) 90 80 80 90 stretch;
-o-border-image: url(rahmenbild.gif) 90 80 80 90 stretch;
border-image: url(rahmenbild.gif) 90 80 80 90 stretch;
border-width: 30px;
}
p {
padding: 50px;
}
</style>
</head>
<body>
<div id="eins">
<p>eons: individuelle Rahmen <br />
border-image: url(rahmenbild.gif) 60 stretch;
</p>
</div>
<div id="zwei">
<p>zwei: individuelle Rahmen<br />
border-image: url(rahmenbild.gif) 60 round;
</p>
</div>
<div id="drei">
<p>drei: individuelle Rahmen<br />
border-image: url(rahmenbild.gif) 60 repeat;
</p>
</div>
<div id="vier">
<p>vier: individuelle Rahmen<br />
border-image: url(rahmenbild.gif) 60 space;
</p>
</div>
<div id="fuenf">
<p>fuenf: individuelle Rahmen<br />
border-image: url(rahmenbild.gif) 60 stretch round;
</p>
</div>
<div id="sechs">
<p>sechs: individuelle Rahmen<br />
border-image: url(rahmenbild.gif) 90 80 80 90 stretch;
</p>
</div>
</body>
</html>
Vor allem ist anscheinend ein border-style:solid; notwendig damit es hinhaut.
#vier frisst nur Googel Chrom und Safari 5.1.7 Win.
Es ist eben immer noch auch im Jahre 2013 so eine Sache mit HTML5 und CSS3, leider. Manchmal einfach zum heulen.
Gruss pumukel
Lesezeichen