CSS-Blockcontainer mit abgerundeten Ecken Generator_CSS/HTML

Natürlich verwenden Sie weiterhin Bilder, aber Sie können Bilder mit den gewünschten Farben erstellen.

http://www.neuroticweb.com/recursos/css-rounded-box/

Speichern Sie das oben generierte Bild und den folgenden Code im selben Ordner:

<p> </p> <title>CSS-Container mit abgerundeten Blöcken</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <stil> .rbroundbox {Hintergrund: URL(nt.gif) wiederholen; .rbtop div { Hintergrund: url(tl.gif) no-repeat oben links } .rbtop { Hintergrund: url(tr.gif) keine Wiederholung oben rechts } .rbbot div { Hintergrund: url(bl.gif) no-repeat unten links } .rbbot { Hintergrund: url(br.gif) no-repeat unten rechts; <style> .rbroundbox { background: url(nt.gif) repeat; } .rbtop div { background: url(tl.gif) no-repeat top left; } .rbtop { background: url(tr.gif) no-repeat top right; } .rbbot div { background: url(bl.gif) no-repeat bottom left; } .rbbot { background: url(br.gif) no-repeat bottom right; } <P>/* height and width stuff, width not really nessisary. */ .rbtop div, .rbtop, .rbbot div, .rbbot { width: 100%; height: 7px; font-size: 1px; } .rbcontent { margin: 0 7px; } .rbroundbox { width: 50%; margin: 1em auto; } </style>/* H枚he und Breite, Breite nicht unbedingt erforderlich */ .rbtop div, .rbtop, .rbbot div, .rbbot { Breite: 100 %; H枚he: 7px; Schriftgr枚</stil>