8
Wie mache ich nur ein oder zwei oder drei Ecken eines div rund?CSS Rundes Eck Divs
A
Antwort
13
Geben Sie die Ecken Sie wollen:
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
+0
Alternativ für drei abgerundete Ecken, um alle Ecken ('border-Radius: 15px;') und dann runden an der Ecke willst du es nicht haben ('border-top-left-radius: 0px;'). – jball
4
Hier ist eine großartige Ressource, die Sie nützlich finden können es für Sie zu tun und zu lernen.
Viel Glück!
Nun zu beantworten (abgesehen vom Werkzeug) Frage:
Eine Ecke (oben links):
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
Zwei Ecken (links oben und rechts):
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
Drei Ecken (oben links und rechts und unten rechts)
-webkit-border-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 10px;
-moz-border-radius-bottomleft: 0;
border-radius: 10px;
border-bottom-left-radius: 0;
Und so weiter ...
Alles ein 10px Radius, sehr einfach mit dem Werkzeug, das ich empfehle.
BTW: Verpassen Sie nicht idlefingers 'Antwort, sehr gute Ressource!
Siehe auch: Creating rounded corners using CSS
+0
+1: http://css3generator.com/ ist auch nützlich. – joksnet
+1
@joksnet Ich wusste es eigentlich nicht, aber es sieht gut aus !! Ich werde es versuchen! – Trufa
+0
Überprüfen Sie auch egrunins Antwort, die Ihnen Optionen gibt, wenn Sie andere Optionen sehen möchten, die kompatibler sein könnten. – Trufa
-1
Keiner der anderen Antworten mit IE8 arbeiten, so dass hier ein Link mit vielen möglichen Lösungen:
0
Achtung: keine der Lösungen bisher mit IE angeboten Werke <= 8. – egrunin
Ich kann nicht glauben, dass dies kein Duplikat ist :) – Trufa
oh yeah ... es ist eigentlich nicht ... – Moon