it-swarm.com.de

Einfügen des Grenzradius mit CSS3

Gibt es eine Möglichkeit, mit css3 einen eingebauten Grenzradius zu erstellen? (Ohne Bilder)

Ich brauche einen Grenzradius wie folgt:

Inset border radius

28
Serhiy

Der beste Weg, den ich mit allen CSS und HTML (keine Bilder usw.) erreicht habe, ist die Verwendung von CSS3-Farbverläufen , pro Lea Verou. Von ihrer Lösung:

div.round {
    background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background:
         -webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
    background-position: bottom left, bottom right, top right, top left;
        -moz-background-size: 50% 50%;
        -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

Das Nettoergebnis ist ein Satz transparenter Farbverläufe mit Kurven. Sehen Sie sich das vollständige JSFiddle an, um eine Demo zu erhalten und mit Ihrem Aussehen herumzuspielen.

Offensichtlich hängt dies von der Unterstützung von rgba und gradient ab und sollte dementsprechend als progressive Verbesserung behandelt werden. Wenn dies für das Design unerlässlich ist, sollten Sie einen Image-basierten Fallback für ältere Browser (insbesondere IE, der gradient nicht unterstützt) zur Verfügung stellen bis über IE9).

32
Chris Krycho

Sie können dies erreichen, indem Sie transparente Kreiselemente mit Rahmenschatten absolut in den Ecken positionieren. Ich habe eine Kombination aus versteckten übergelaufenen Divs verwendet, die Spannweiten, Box-Schatten, Rahmen und Pseudo-Selektoren enthalten.

Schauen Sie sich mein Beispiel an.

Dies ist der grundlegende HTML- und CSS-Code, den Sie zum Einstieg benötigen:

a {display:inline-block; width:250px; height:100px; background:#ccc; border:2px solid #000; position:relative; margin:10px;}

a div {position: absolute; top: 0; overflow: hidden; width: 15px; height: 100%;}
a div:after {content:''; background:#000; width:2px; height:75px; position:absolute; top:12.5px;}

a div:first-of-type {left: -14px;}
a div:first-of-type:after {left:0;}

a div:last-of-type {right: -14px;}
a div:last-of-type:after {right:0;}

a span {display:block; width:30px; height:30px; background:transparent; position:absolute; bottom:-20px; right:-20px; border:2px solid #000; border-radius:25px; box-shadow:0 0 0 60px #ccc;}

a div:first-of-type span {left:-20px;}
a div:first-of-type span:first-child {top:-20px;}
a div:first-of-type span:last-child {bottom:-20px;}

a div:last-of-type span {right:-20px;}
a div:last-of-type span:first-child {top:-20px;}
a div:last-of-type span:last-child {bottom:-20px;}
<a href="">
    <div>
        <span></span>
        <span></span>
    </div>

    <div>
        <span></span>
        <span></span>
    </div>
</a>

11
Brett Hayes

Ich glaube nicht, dass es möglich wäre, wenn die Ecken transparent sein müssen. Wenn jedoch der Hintergrund bekannt ist, können Sie in jeder Ecke ein Div mit abgerundeten Rändern erstellen. Wenn diese divs dann dieselbe Hintergrundfarbe wie der Seitenhintergrund erhalten, wird der Effekt wirksam.

Siehe mein Beispiel hier http://jsfiddle.net/TdDtX/

#box {
    position: relative;
    margin: 30px;
    width: 200px;
    height: 100px;
    background: #ccc;
    border: 1px solid #333;
}

.corner {
    position: absolute;
    height: 10px;
    width: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

.top-left {
    top: -1px;
    left: -1px;
    border-radius: 0 0 100% 0;
    border-width: 0 1px 1px 0;
}

.top-right {
    top: -1px;
    left: 190px;
    border-radius: 0 0 0 100%;
    border-width: 0 0 1px 1px;
}

.bottom-left {
    top: 90px;
    left: -1px;
    border-radius: 0 100% 0 0;
    border-width: 1px 1px 0 0;
}

.bottom-right {
    top: 90px;
    left: 190px;
    border-radius: 100% 0 0 0;
    border-width: 1px 0 0 1px;
}
<div id="box">
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</div>

5
John Lawrence

Es sieht nicht so aus, als wäre das möglich. Ich habe einen Grenzradius mit einem negativen Wert ausprobiert, nur um zu sehen, was passieren würde, aber es hatte keine Auswirkungen.

Bearbeiten:

Selbst wenn Sie die Box in kleinere Teile zerlegen, müssen Sie irgendwann immer noch eine transparente Einschubecke erstellen. Die Transparenz ist der knifflige Teil, der verhindern könnte, dass dies ohne Bilder möglich ist. Grundsätzlich müssten Sie in der Lage sein, einen transparenten Kreis mit einer nicht transparenten umgebenden bg darzustellen (und wenn dies in CSS möglich ist, würde ich gerne wissen, wie :)

Wenn Sie keine Transparenz benötigen, gibt es Möglichkeiten, dies zu tun.

2
Matt Coughlin

Sie können diesen Effekt mit den neuen css3-Border-Bildern erzielen (es sind zwar Bilder, aber sie lassen sich problemlos skalieren). Dies ist jedoch ziemlich neu und noch nicht sehr verbreitet (gut in allen anständigen Browsern (mit Präfixen) mit Ausnahme von IE, um genau zu sein;)).

Ein schöner Artikel über Randbilder auf csstricks .

Browserunterstützung

2
Christoph

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>

</body>
</html>

Beispiel: http://jsfiddle.net/dVmX3/

1
Davinder Singh

body {
    background: #fff;
}

.div{
 position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>

</body>
</html>

0
user8696825

Hmm, du könntest diesen kleinen Trick hier verwenden, um Inset Border Radius zu erstellen.

Um Transparenz zu unterstützen, müssen Sie wahrscheinlich weitere Blöcke dazwischen hinzufügen. Mehr oder weniger wie die alten abgerundeten Bilder. für jede Ecke mit dem transparenten Bild einen Abstand haben. Und erstreckt sich an den Seiten und an der Oberseite, um den leeren Raum auszufüllen. Anstatt Bilder zu verwenden, können Sie diesen Trick in CSS verwenden.

0
Jon Mifsud