Wie kann man mit CSS einem Element runde Ecken geben? Ich weiß, dass geplant ist, das zu standardisieren im CSS, aber ist das überhaupt in heutigen Browsern möglich?
Anmerkung: Dies wurde bereits unter
Wie kann man mit CSS runde Ränder darstellen? gefragt.
Anmerkung: Dies wurde bereits unter
Wie kann man mit CSS runde Ränder darstellen? gefragt.
| 3 |
hilft dir das schon? http://codekicker.de/fragen/Wie-kann-man-mit-CSS-runde-Raender-darstellen/112
|
5 Antworten
Nicht mit CSS, aber schau doch mal unter "Runde und andere Ecken". Vielleicht auch ein Ansatz.
|
316 ● 1 ● 2 |
Wenn es wichtig ist, das es überall funktionieren muss dann natürlich Grafiken
Bei irgend welchen Hinweisboxen wo es wirklich nur den border betrifft, dann mit CSS, da haben die IE User eben Pech gehabt. Der IE9 wird es ja vielleicht richten ;)
Notfalls gibt es auch noch einige andere Varianten, Scripte oder Klassen die den Border dynamisch erzeugen mit JS bzw. durch Div's die dynamisch genereriert werden.
Ein paar Beispiele findest du hier:
http://www.curvycorners.net/
http://www.phpmyborder.com/ (gerade down daher => http://www.phpclasses.org/)
http://www.netzgesta.de/corner/
http://www.html.it/articoli/niftycube/index.html
usw.
Da gibt es wirklich einige Lösungen.
grüße
BiX
Bei irgend welchen Hinweisboxen wo es wirklich nur den border betrifft, dann mit CSS, da haben die IE User eben Pech gehabt. Der IE9 wird es ja vielleicht richten ;)
Notfalls gibt es auch noch einige andere Varianten, Scripte oder Klassen die den Border dynamisch erzeugen mit JS bzw. durch Div's die dynamisch genereriert werden.
Ein paar Beispiele findest du hier:
http://www.curvycorners.net/
http://www.phpmyborder.com/ (gerade down daher => http://www.phpclasses.org/)
http://www.netzgesta.de/corner/
http://www.html.it/articoli/niftycube/index.html
usw.
Da gibt es wirklich einige Lösungen.
grüße
BiX
|
139 ● 1 ● 4 |
Ich mache das normalerweise mit einem DIV:
Dieses Beispiel klappt aber soweit ich weiß aber nicht im Internet Explorer!
<div style="background-color:#eeeeee; border-width:1px; border-style:solid; border-color:#0050A8; padding: 10px; left:10px; top:50px; -moz-border-radius:10px; -khtml-border-radius:10px; text-align:justify; ">
<table>
<tr>
<td>Test</td>
</tr>
</table>
</div>
Dieses Beispiel klappt aber soweit ich weiß aber nicht im Internet Explorer!
|
1,8k ● 7 |
|
|
1,8k ● 7 |
Am besten grafisch.
in eine Grafik datei die horizontalen bestandteile: ecken und "das dazwischen", also die Ränder oben und unten.
in eine Andere Graphik die Vertikalen Bestandteile (also Rand links und rechts)
dann eine Tabelle mit 3 Spalten und 3 Reihen
die hintergrund-eigenschaft der td's dann so:
1: horizontale graphik offset ecke_links_oben
2: horizontale graphik offset rand_oben mit repeat-x
3: horizontale graphik offset ecke_rechts
4: vertikale graphik offset rand_links mit repeat-y
5: Dein Inhalt (also DIV oder was auch immer)
6: vertikale graphik offset rand_rechts mit repeat-y
7-9: so wie 1-3
ist zwar einmal ein bisschen aufwand, dafür hat man dann aber einen Vernünftigen "Kasten" mit runden ecken, den man in jedem Browser vernünftig einsetzen kann.
in eine Grafik datei die horizontalen bestandteile: ecken und "das dazwischen", also die Ränder oben und unten.
in eine Andere Graphik die Vertikalen Bestandteile (also Rand links und rechts)
dann eine Tabelle mit 3 Spalten und 3 Reihen
|-1-|-----2------|-3-|
| 4 | 5 | 6 |
|-7-|-----8------|-9-|
die hintergrund-eigenschaft der td's dann so:
1: horizontale graphik offset ecke_links_oben
2: horizontale graphik offset rand_oben mit repeat-x
3: horizontale graphik offset ecke_rechts
4: vertikale graphik offset rand_links mit repeat-y
5: Dein Inhalt (also DIV oder was auch immer)
6: vertikale graphik offset rand_rechts mit repeat-y
7-9: so wie 1-3
ist zwar einmal ein bisschen aufwand, dafür hat man dann aber einen Vernünftigen "Kasten" mit runden ecken, den man in jedem Browser vernünftig einsetzen kann.
|
964 ● 7 |
Ich lüfte das Geheimnis mal. Dafür bitte einmal Hoch Pushen :)
Also mit CSS kannst du ohne Grafiken Runde Ecken erstellen. Allerdings kann der Internet Explorer diese Runde Ecken nicht wahrnehmen/berücksichtigen.
Deswegen erstellt man Images. Für das Erstellen von Images und Code kannst du Folgendes nutzen: hier
So und jetzt bitte Push :)
-----------
beat-blogger
Also mit CSS kannst du ohne Grafiken Runde Ecken erstellen. Allerdings kann der Internet Explorer diese Runde Ecken nicht wahrnehmen/berücksichtigen.
Deswegen erstellt man Images. Für das Erstellen von Images und Code kannst du Folgendes nutzen: hier
So und jetzt bitte Push :)
-----------
beat-blogger
