Wie wird die Grenzradiuskurve außen dargestellt?Grenz-Radius-CSS-Eigenschaftskurve außerhalb
Die Unterseite der Grenzradius wollen außen zu krümmen. Wie geht es mit CSS3?
Wie wird die Grenzradiuskurve außen dargestellt?Grenz-Radius-CSS-Eigenschaftskurve außerhalb
Die Unterseite der Grenzradius wollen außen zu krümmen. Wie geht es mit CSS3?
Ja, Sie können dies ohne zusätzliche Markierung tun. Schreiben wie folgt aus:
CSS
.active{
border:1px solid red;
border-bottom:0;
width:80px;
height:40px;
margin:30px;
position:relative;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.active:after,
.active:before{
content:'';
width:40px;
height:30px;
border:1px solid red;
position:absolute;
bottom:-3px;
border-top:0;
}
.active:after{
border-left:0;
-moz-border-radius:0 0 5px 0;
-webkit-border-radius:0 0 5px 0;
border-radius: 0 0 5px 0;
left:-41px;
}
.active:before{
border-right:0;
-moz-border-radius:0 0 0 5px;
-webkit-border-radius:0 0 0 5px;
border-radius: 0 0 0 5px;
right:-41px;
}
HTML
<div class="active">hi</div>
prüfen diese http://jsfiddle.net/p6sGJ/
Sie haben vergessen, die Eigenschaft "real" 'border-radius' hinzuzufügen. Wir wollen nicht mehr von dieser Verrücktheit: http://remysharp.com/2012/02/09/vendor-prefixes-about-to-go-south/ – peirix
Das ist schön, aber ich gebe nur ein Beispiel, die Unterstützung-Webkit & mozilla browsers :) – sandeep
Ja, aber das Problem ist, dass jemand wahrscheinlich nur Ihren Code kopieren wird, und das ist wahrscheinlich der Anfang des Problems. Also habe ich gerade eine kurze Bearbeitung Ihrer Antwort vorgenommen, die übrigens eine gute Lösung ist, so dass wir versuchen können, dies so weit wie möglich zu vermeiden. – peirix
Dies wird ohne zusätzliche Markup nicht möglich sein, da Teile der Grafik außerhalb sind das Boxmodell. – Paul