Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > CSS-Tutorial > Kann CSS Teilränder ohne zusätzliche Elemente erstellen?

Kann CSS Teilränder ohne zusätzliche Elemente erstellen?

Susan Sarandon

Freigeben： 2024-12-03 08:44:10

Original

770 Leute haben es durchsucht

Can CSS Create Partial Borders Without Extra Elements?

Grenzlängenbeschränkungen überwinden

Frage:

Gibt es eine Methode, um die Ausdehnung einzuschränken? einer Grenze? Insbesondere ein

hat einen unteren Rand, aber Sie wünschen sich einen linksbündigen Rand, der nur teilweise nach oben reicht. Ist es machbar, dies zu erreichen, ohne der Seite zusätzliche Elemente hinzuzufügen?

Antwort:

CSS-generierte Inhalte bieten eine Lösung:

div {
  position: relative;
}

/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

Nach dem Login kopieren

<div>Lorem Ipsum</div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonKann CSS Teilränder ohne zusätzliche Elemente erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Warum akzeptieren Spannweiten keine Breite und Höhe und wie kann dies behoben werden? Nächster Artikel：HTML-Bildabmessungen: Inline-Höhen-/Breitenattribute oder CSS-Styling?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2159

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2310

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1947

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...