Wie erstelle ich mit CSS einen Verlaufsrahmen? 5 Möglichkeiten zum Teilen

Wie erstelle ich mit CSS einen Verlaufsrahmen? Der folgende Artikel zeigt Ihnen 5 Möglichkeiten zur Implementierung von Verlaufsrändern mit CSS. Ich hoffe, er wird Ihnen hilfreich sein!

Das Festlegen einer Verlaufsfarbe für den Rand ist ein sehr häufiger Effekt. Es gibt viele Ideen, um diesen Effekt zu erzielen. Heute liste ich die Methoden auf, die ich als Referenz kenne. (Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

1. Verwenden Sie border-image

. border-image

CSS 提供了 border-image 属性用于给 border 绘制复杂图样，与 background-image 类似，我们可以在 border 中展示image和linear-gradient。

通过 border-image 设置渐变色 border 是最简单的方法，只需要两行代码：

CSS:

div {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

/* 或者 */
div {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

Codepen demo

https://codepen.io/mudontire/pen/xxLxeZw

这种方式虽然简单但有个明显的缺陷，不支持设置 border-radius。接下来会介绍几种支持 border-radius 的方法。

2. 使用 background-image

使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法，思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。

HTML:

<div class="border-box border-bg">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione
    necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus
    voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  width: 300px;
  height: 200px;
  margin: 25px 0;
}

.border-bg {
  padding: 4px;
  background: linear-gradient(to right, #8f41e9, #578aef);
  border-radius: 16px;
}

.content {
  height: 100%;
  background: #222;
  border-radius: 13px; /*trciky part*/
}

Codepen demo

https://codepen.io/mudontire/pen/ZEJEZoY

这种方式的优点是容易理解，兼容性好，缺点是设置 content 的 border-radius 会比较 tricky，且不准确。

3. 两层元素、background-image、background-clip

为了解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。

HTML:

<div class="border-box">
  <div class=&#39;border-bg&#39;></div>
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/ 
  background: linear-gradient(to right, #8f41e9, #578aef);
}

Codepen demo

https://codepen.io/mudontire/pen/yLoLrxL

4. 伪元素、方法3的简化

我们可以使用伪元素替换 div.border-bg 以简化HTML结构。

HTML:

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/
  background: linear-gradient(to right, #8F41E9, #578AEF);
}

Codepen demo

https://codepen.io/mudontire/pen/JjyjVwN

5. 单层元素、background-clip、background-origin、background-image

最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-imageCSS bietet border-image

Attribut wird verwendet, um komplexe Muster für Ränder zu zeichnen, und background-image

Ebenso können wir in anzeigen das Randbild und linear-gradient. Das Festlegen des Verlaufsrahmens über border-image ist die einfachste Methode, die nur zwei Codezeilen erfordert:

CSS:

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

Codepen-Demo

https://codepen. io /mudontire/pen/xxLxeZw

Obwohl diese Methode einfach ist, weist sie einen offensichtlichen Fehler auf. Sie unterstützt das Festlegen von border-radius nicht. Als Nächstes stellen wir verschiedene Methoden zur Unterstützung von border-radius vor.

2. Verwenden Sie background-imageAm einfachsten ist es, mit background-image einen Hintergrund mit Farbverlauf zu zeichnen und die Mitte mit einer Volltonfarbe abzudecken Denken Sie an diese Methode. Die Idee ist: Verwenden Sie zwei überlappende Felder, legen Sie einen Verlaufshintergrund und eine Polsterung für das untere Feld fest und legen Sie einen einfarbigen Hintergrund für das obere Feld fest.

🎜HTML:🎜🎜

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

🎜🎜CSS:🎜🎜rrreee🎜🎜Codepen-Demo🎜🎜https://codepen.io/mudontire/pen/ZEJEZoY🎜🎜🎜Die Vorteile dieser Methode sind, dass sie leicht zu verstehen ist und hat eine gute Kompatibilität. Der Nachteil besteht darin, dass das Festlegen des border-radius des Inhalts schwierig und ungenau ist. 🎜🎜3. Zweischichtige Elemente, Hintergrundbild, Hintergrundclip🎜Um das Problem des Grenzradius zu lösen Code> in Methode 2 Für die genaue Frage können Sie ein separates Element als Verlaufshintergrund verwenden und es auf der unteren Ebene platzieren. Legen Sie einen transparenten Rand und einen einfarbigen Hintergrund auf der oberen Ebene fest (Sie müssen „background-clip: padding“ festlegen -box, um zu vermeiden, dass der Rand des unteren Elements verdeckt wird), nach oben und unten. Stellen Sie für beide Ebenen den gleichen <code>border-radius ein. 🎜🎜🎜HTML:🎜🎜rrreee🎜🎜CSS:🎜🎜rrreee🎜🎜Codepen-Demo🎜🎜https://codepen.io/mudontire/pen/yLoLrxL🎜🎜🎜4. Pseudoelemente, Vereinfachung von Methode 3 🎜Wir können div.border-bg durch Pseudoelemente ersetzen, um die HTML-Struktur zu vereinfachen. 🎜🎜🎜HTML:🎜🎜rrreee🎜🎜CSS:🎜🎜rrreee🎜🎜Codepen-Demo🎜🎜https://codepen.io/mudontire/pen/JjyjVwN🎜🎜🎜5. Einzelebenenelement, Hintergrundclip, <code>background-origin, background-image🎜Die letzte Methode ist meiner Meinung nach die eleganteste Methode, die nur eine einzige Ebene verwenden muss von Elementen. Es legt drei Attribute fest: background-clip, background-origin und background-image. Jedes Attribut legt zwei Sätze von Werten fest Die erste Gruppe wird verwendet, um den monochromen Hintergrund innerhalb des Rahmens festzulegen, und die zweite Gruppe wird verwendet, um die Verlaufsfarbe am Rand festzulegen. 🎜🎜🎜HTML:🎜🎜rrreee🎜🎜CSS:🎜🎜rrreee🎜🎜Codepen-Demo🎜🎜https://codepen.io/mudontire/pen/wvqvZZO🎜🎜🎜Diese 5 Methoden fallen mir jetzt ein und ich persönlich empfehle sie Verwenden Sie zuerst 4 und 5. Wenn es andere bessere Methoden gibt, können Sie diese gerne hinzufügen. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Verlaufsrahmen? 5 Möglichkeiten zum Teilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!