Teilen Sie mit, wie Sie mit CSS andere abgerundete Ränder als den Randradius erstellen können

Die Verwendung des border-radius-Attributs von CSS3 zum Erstellen abgerundeter Ränder ist recht einfach. Probleme mit der Browserkompatibilität sind jedoch nicht einfach zu handhaben. Hier werden wir die Methoden zum Erstellen abgerundeter CSS-Rahmen außer border-radius zusammenfassen.

Der Randradius von CSS3
verwendet p+CSS, um einen abgerundeten Rand zu erzeugen, der in vielen Fällen verwendet wird. Derzeit ist einer der abgerundeten Ränder von p+CSS die Verwendung von CSS3 One besteht darin, das Layout zu verwenden, um abgerundete Ecken zu simulieren.
Lassen Sie uns zuerst über die erste Methode sprechen, die Verwendung von CSS3. Ich sehe, dass Firefox3 dies unterstützt. Es werden nichts weiter als rechte Winkel angezeigt IE. , sei stur.

Mit CSS3 können Sie angeben, dass alle vier Ecken abgerundet sind oder dass eine bestimmte Ecke abgerundet ist, was sehr praktisch ist. Der Code lautet wie folgt:

#round {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius: 10px;     
    -webkit-border-radius: 10px;     
    color:#fff;     
}     

#indie {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius-topright: 10px;     
    -moz-border-radius-bottomright: 10px;     
    -webkit-border-top-left-radius: 10px;     
    -webkit-border-bottom-left-radius: 10px;     
    color:#fff;     
}

Abgerundeter Rand

Teilweise abgerundete Ecken< ; /h1>

Erzielen Sie abgerundete Ecken ohne die Verwendung von border-radius
In CSS3 können Sie abgerundete Ecken einfach festlegen, indem Sie das Attribut border- radius Rechteck, aber dieses Attribut wird in IE8 und niedriger nicht unterstützt. Um in älteren Browserversionen ein adaptives abgerundetes Rechteck in Breite und Höhe zu erreichen, können die folgenden drei Methoden verwendet werden.

1. Verwenden Sie das Hintergrundbild, um abgerundete Ecken zu erstellen.

Verwenden Sie das Hintergrundbild, um ein abgerundetes Rechteck mit adaptiver Breite und Höhe zu erstellen. Zuerst müssen Sie es ausschneiden Platzieren Sie dann die vier Bilder mit abgerundeten Ecken auf den vier Ecken des Rechtecks ​​und fertig. Dies erfordert insgesamt 5 p-Tags, 1 Container p und 4 Hintergrundp mit abgerundeten Ecken. Ist das leicht zu verstehen?

Im Hinblick auf die konkrete Umsetzung müssen einige Details beachtet werden. Für einen rechteckigen Behälter p:

Die Größe der oberen und unteren Polsterung wird mindestens auf die Höhe der abgerundeten Ecken eingestellt.
Position ist auf relative Positionierung eingestellt.
Inhalte platzieren.
Für 4 Hintergründe mit abgerundeten Ecken:

Stellen Sie jedes Hintergrundbild mit abgerundeten Ecken entsprechend ein.
Absolut an den vier Ecken des Containerrechtecks ​​positioniert.
Sie müssen die Breiten- und Höhenwerte festlegen, um das Hintergrundbild anzuzeigen.
Angenommen, die Breite und Höhe des abgerundeten Bildes beträgt 5 Pixel. Der spezifische Code lautet wie folgt:

<p class="content">
    <p class="top-left"></p>
    <p class="top-right"></p>
    <p class="btm-left"></p>
 <p class="btm-right"></p>
</p>

.content {   
 position: relative;   
 padding: 5px;   
}   
.top-left,   
.top-rightright,   
.btm-left,   
.btm-rightright {   
 position: absolute;   
 width: 5px;   
 height: 5px;   
}   
.top-left {   
 top: 0;   
 left: 0;   
 background: url(imgs/top-left.png) no-repeat top left;   
}   
.top-rightright {   
 top: 0;   
 rightright: 0;   
 background: url(imgs/top-rightright.png) no-repeat top left;   
}   
.btm-left {   
 bottombottom: 0;   
 left: 0;   
 background: url(imgs/btm-left.png) no-repeat top left;   
}   
.btm-rightright {   
 bottombottom: 0;   
 rightright: 0;   
 background: url(imgs/btm-rightright.png) no-repeat top left;   
}

2. Reines CSS+p Erstellen eines abgerundeten Rechtecks ​​

Das Prinzip dieser Methode besteht darin, Pixelpunkte zum Zeichnen von Bögen zu verwenden, um abgerundete Ecken zu simulieren. Der Einfachheit halber verwende ich hier ein Beispiel mit einem Eckenradius von 3 Pixeln, bei dem die Hintergrundfarbe des abgerundeten Rechtecks ​​rosa und der Rand des Rechtecks ​​schwarz ist. Die abgerundete Ecke der oberen linken Ecke wird vergrößert, wie in der Abbildung unten gezeigt:

Hier benötigen die Ober- und Unterseite des Rechtecks ​​3 P's mit einer Höhe von 1 Pixel und sind vertikal angeordnet zusammen, um die abgerundeten Ecken zu simulieren. Die konkrete Implementierung ist wie folgt:

Das erste p ist der schwarze obere Rand des Rechtecks ​​im Bild oben. Da der simulierte Eckenradius 3 Pixel beträgt, sind der linke und rechte Rand des p auf 3 Pixel festgelegt. und die Hintergrundfarbe ist auf Schwarz eingestellt.
Der linke und rechte Rand des zweiten p sind auf 2 Pixel eingestellt, der linke und rechte Rand sind 1 Pixel große schwarze Linien und die Hintergrundfarbe ist rosa.
Der linke und rechte Rand des dritten p sind auf 1 Pixel eingestellt, der linke und rechte Rand sind 1 Pixel große schwarze Linien und die Hintergrundfarbe ist rosa.
Die beiden abgerundeten Ecken unter dem abgerundeten Rechteck sind die oben genannten drei Ps, die in umgekehrter Reihenfolge angeordnet sind.
Das p des rechteckigen Inhaltsbereichs muss nur den linken und rechten Rand und die Hintergrundfarbe festlegen.
Der spezifische Code lautet wie folgt

<p class="wrapper">
    <p class="r1"></p>
 <p class="r2"></p>
 <p class="r3"></p>
 <p class="content">aaaaa</p>
 <p class="r3"></p>
 <p class="r2"></p>
 <p class="r1"></p>
</p>

.r1 {   
 height: 1px;   
 margin: 0 3px;   
 background-color: #111;   
}   
.r2 {   
 height: 1px;   
 margin: 0 2px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.r3 {   
 height: 1px;   
 margin: 0 1px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.content {   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}

Analyse der Vor- und Nachteile dieser Methode:

Tut Verwenden Sie keine Hintergrundbilder und reduzieren Sie die Anzahl der HTTP-Anfragen.
Die spätere Wartung ist gut, aber wenn die Pixel des abgerundeten Rechtecks ​​zunehmen, nimmt der bedeutungslose P-Code exponentiell zu.
Das implementierte abgerundete Rechteck weist Einschränkungen auf.
Es können nur einfarbige, abgerundete Ecken erzielt werden.

3. Verwenden Sie den CSS-Rahmen, um ein Trapez zu zeichnen, um abgerundete Ecken zu simulieren.

Durch Festlegen des Rahmenattributs können Sie Trapeze und Dreiecke erhalten :

Wenn Sie einen relativ großen Breitenwert für die vier Ränder von p festlegen, können Sie vier Trapeze erhalten, wie das erste Muster im Bild oben;
Auf dieser Basis , wenn Sie p einstellen Nachdem der Höhenwert von p auf 0 gesetzt ist, können Sie ein Trapez und ein gleichschenkliges Dreieck erhalten, wie im zweiten Muster im Bild oben gezeigt.
Wenn die Breite und Höhe von p auf eingestellt sind 0, und nur der obere und der linke Rand werden festgelegt. Wenn Sie einen Rand festlegen, können Sie zwei rechtwinklige Dreiecke erhalten, was beim dritten Muster im Bild der Fall ist.
Legen Sie auf dieser Grundlage die Farbe eines der Ränder fest zu transparent, und Sie können so etwas wie das vierte Muster erhalten. Sie erhalten auch ein rechtwinkliges Dreieck.
Der Code lautet wie folgt:

<p class="box1"></p>
<p class="box2"></p>
<p class="box3"></p>
<p class="box4"></p>

.box1 {   
 height: 20px;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box2 {   
 height: 0;   
 width: 20px;   
 border-top: 20px solid red;   
 border-right: 20px solid green;   
 border-bottom: 20px solid blue;   
 border-left: 20px solid yellow;   
}   
.box3 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid yellow;   
}   
.box4 {   
 height: 0;   
 width: 0;   
 border-top: 50px solid red;   
 /* border-right: 20px solid green; */
 /* border-bottom: 20px solid blue; */
 border-left: 50px solid transparent;   
}

已经知道了如何通过 border 画出梯形了，那又该如何利用梯形模拟圆角矩形呢？很简单，只要在矩形的上面和下面各放上一个梯形，就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦，直接上效果图：

具体代码如下：

<p class="wrapper">
    <p class="top"></p>
 <p class="content">
     <p>利用border画出梯形，模拟圆角</p>
 </p>
 <p class="bottom"></p>
</p>

p {   
 box-sizing: border-box;   
}   
.top {   
 height: 0;   
 border-top: 3px solid transparent;   
 border-bottom: 3px solid #111;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.bottombottom {   
 height: 0;   
 border-top: 3px solid #111;   
 border-bottom: 3px solid transparent;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.content {   
 color: #fff;   
 background-color: #111;   
}   
.wrapper {   
 width: 200px;   
 margin: 0 auto;   
}

Das obige ist der detaillierte Inhalt vonTeilen Sie mit, wie Sie mit CSS andere abgerundete Ränder als den Randradius erstellen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!