Ausführliche Erklärung zur Implementierung mehrerer Rahmen in CSS3

Der Box-Shadow von CSS3 ist wirklich leistungsstark, um mehrere Ränder zu erstellen. Dies ist auch der Schwerpunkt der detaillierten Erläuterung der CSS3-Methode zur Implementierung mehrerer Ränder. Aber werfen wir vorher einen Blick auf die traditionelle Methode mit besserer Kompatibilität:

Methode 1: p-Verschachtelung, um mehrere Ränder zu erreichen.

Rendering:

HTML-Code

<p id="outer">
    <p id="inner">p嵌套实现多重边框</p>
</p>

CSS-Code

#outer {   
    width: 100px;   
    height: 100px;   
    background-color: bisque;   
    border: 10px solid brown;   
    position: relative;   
}   

#inner {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
}   
/*#outer,
#inner {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}*/

Nachteile: Es ist möglicherweise nicht möglich, die Struktur zu ändern, oder die Kosten für die Änderung der HTML-Struktur sind hoch, wenn mehrere PS mit abgerundeten Ecken festgelegt werden. Die Ränder passen nicht perfekt. Abgerundete Renderings mit mehreren Rändern:

Methode 2: Verwenden Sie Umriss+Umriss-Offset, um mehrere Ränder zu erzielen.
Wenn wir nur zwei Rahmenebenen zeichnen müssen, können wir auch Umrisse verwenden. Der Umriss ist eine Ebene außerhalb des Randes, was dem Randprinzip entspricht. Durch Festlegen des Umrissstils können Sie eine weitere Rahmenebene außerhalb des Rahmens festlegen.
Es ist jedoch zu beachten, dass sich der durch das Umrissattribut festgelegte Rahmen mit der Änderung des Rahmenstils des internen Elements nicht ändert. Mit anderen Worten: Wenn der Elementrand abgerundete Ecken hat, ist der äußerste Rand, der durch Umriss gezeichnet wird, immer noch rechteckig. Dies ist ein Mangel bei der Umrisszeichnung von Rändern.
Rendering:

HTML-Code

<p id="outline">outlie实现多重边框</p>

CSS-Code

#outline {   
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    /*-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;*/
    outline: 10px solid brown;   
    outline-offset: 0px;   
    /*border和outline之间的距离*/
    margin: 20px;   
    /*因为outline不影响布局，使用margin给边框腾位置*/
}

Vorteile: Es ähnelt einem Rahmen und kann auf verschiedene Linientypen eingestellt werden, z. B. gepunktete Linien und durchgezogene Linien.

Nachteile: Der Umriss hat keinen Einfluss auf das Layout. Sie müssen den Rand verwenden, um Platz für den Rand zu schaffen. um zu verhindern, dass es von anderen Elementen verdeckt wird. Wenn der Container selbst abgerundete Ecken hat, kann der Strich nicht vollständig an die abgerundeten Ecken angepasst werden. Die Darstellung erfolgt wie folgt:

Methode 3: Verwenden Sie die Box-Shadow-Außenprojektion, um mehrere zu erreichen Grenzen.
Das Box-Shadow-Attribut kann den Schatten für das Box-Modell festlegen. Tatsächlich hat es aber auch die Funktion, Grenzen zu setzen.
Box-Shadow kann fünf Parameter übergeben. Die ersten beiden Parameter repräsentieren den Versatz der Projektion, der dritte Parameter repräsentiert den Unschärfegrad der Projektion, der vierte Parameter repräsentiert die Erweiterung der Projektion und der letzte Parameter repräsentiert die Farbe der Projektion. Allerdings verwenden wir den vierten Parameter hier selten, um die Projektion zu erweitern. Durch Festlegen eines geeigneteren Werts kann der Effekt des Randes simuliert werden.
In ähnlicher Weise kann das Box-Shadow-Attribut eine Liste mehrerer Schatten übergeben, getrennt durch ",". Solange wir also eine Schattenliste definieren und den Wert ihres Erweiterungsparameters schrittweise erhöhen, können wir den Effekt mehrerer Grenzen zeichnen.
Rendering:

HTML-Code

<p id="boxShadow">boxshadow实现多重边框(外投影)</p>

CSS-Code

#boxShadow {   
    margin: 40px;   
    /*因为box-shadow不影响布局，使用margin给边框腾出位置*/
    width: 84px;   
    height: 84px;   
    border: 8px solid blue;   
    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px;   
    border-radius: 5px;   
    -webkit-box-shadow: 0 0 0 10px brown;   
    box-shadow: 0 0 0 10px brown;   
    /*参数分别为：水平偏移量、垂直偏移量、模糊距离、向外扩展距离和投影颜色*/
}

Vorteile: Mehrere abgerundete Ecken werden gleichzeitig perfekt aneinander ausgerichtet, Sie können auch eine Liste erhalten und mehrere Projektionen (d. h. Ränder) gleichzeitig festlegen. Sein Erweiterungseffekt basiert auf der Form des Elements selbst. Wenn das Element ein Rechteck ist, wird es zu einem größeren Rechteck erweitert. Wenn das Element abgerundete Ecken hat, wird es auch zu abgerundeten Ecken erweitert.

Nachteile: CSS3-Attribute haben eine schlechte Kompatibilität; Box-Shadow hat keinen Einfluss auf das Layout. Wenn die relative Position dieses Elements und anderer Elemente wichtig ist, müssen Sie Ränder und andere Methoden verwenden, um zusätzlichen Platz für diese zu schaffen „Grenze“ schafft Platz, um zu verhindern, dass er von anderen Elementen verdeckt wird.

Hinweis: Die Verwendung von Inline-Schatten (d. h. der hinzugefügte Box-Shadow-Parameter ist eingefügt, der Standardwert ist äußerer Schatten, wenn er nicht festgelegt ist) scheint eine bessere Wahl zu sein. Da Inline-Schlagschatten es ermöglichen, dass der Schlagschatten innerhalb des Elements erscheint, ist es einfacher, den Abstand so einzustellen, dass Platz für mehrere Ränder innerhalb des Elements geschaffen wird.

Methode 4: Verwenden Sie die Box-Shadow-Innenprojektion, um mehrere Ränder zu erzielen. (Empfohlen)

Rendering:

HTML-Code

<p id="moreboxShadow">boxshadow实现多重边框(内投影)</p>

CSS-Code

/*使用box-shadow一次性设置多个边框，并且使用内嵌投影*/
#moreboxShadow {   
    width: 120px;   
    height: 120px;   
    border: 8px solid blue;   
    /*注意：向外扩张的距离要每次累加；内嵌投影即添加参数为inset,该参数可选，当不设置时即为外投影*/
    -webkit-box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    box-shadow: inset 0 0 0 10px brown, inset 0 0 0 20px yellow, inset 0 0 0 30px green;   
    padding: 30px;   
    /*设置内边距，为box-shadow添加的添加的边框疼位置，这样就不会影响元素之间的位置*/
}

Vorteile: Durch die Inline-Schattierung erscheint der Schatten innerhalb des Elements, und das Festlegen der Polsterung schafft Platz für mehrere Ränder innerhalb des Elements, was die Handhabung erleichtert.

Nachteile: CSS3-Attribute, schlechte Kompatibilität

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung mehrerer Rahmen in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!