So implementieren Sie vertikale Linien in CSS

Implementierungsmethode: 1. Verwenden Sie die Attribute „border-left“ oder „border-right“ zum Implementieren. 2. Verwenden Sie das Attribut „box-shadow“ zum Implementieren. " zu implementieren; 5. , implementiert mit linearGradient Gradient.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So implementieren Sie vertikale Linien in CSS

html:

<p>实现竖线</p>

css:

p{
        width: 200px;
        height: 50px;
        line-height:50px;
        text-align: center;
        background: #ccc;
        position: relative;
  }

Methode 1: Verwenden Sie den Rand links oder den Rand rechts 2: Pseudo verwenden Zu erreichende Elemente

Jedes Etikett hat vorher und nachher zwei Pseudoelemente, und wir verwenden diese Art von Etikett häufig, um einige kleine Symbole wie „Icon“ zu erstellen. Hier verwenden wir Pseudoelemente und es ist einfach, den gewünschten Effekt zu erzielen.

.p1 {
	border-left: 5px solid red;
	border-right: 5px solid red;
}

Rendering:

Methode 3: Innerer/äußerer Schatten

Durch die Verwendung von innerem oder äußerem Schatten kann dieser Effekt ebenfalls erzielt werden, in einigen Chrome-Versionen (z. B. Chrome/70.0) ist dies jedoch der Fall be 1px Bei anderen Browsern sind keine Kompatibilitätsprobleme aufgetreten.

.p1::before {
        content: "";
        width: 5px;
        height:50px;
        position: absolute;
        top: 0;
        left: 0;
        background: red;
}

Rendering:

Methode 4: Schlagschatten

CSS3 neuer Filter Schlagschatten, einer der Filter im Filter, kann auch einen Schatten erzeugen.

/* 内阴影 */
    .p1{
        box-shadow:inset 5px 0px 0 0 red;
    }

/* 外阴影  有些Chrome（比如：Chrome/70.0）版本上会底部1px兼容性问题，显示效果如下图*/
    .p1{
        box-shadow:-5px 0px 0 0 red;
    }

Rendering:

Methode 5: Gradient linearGradient

.p1{
   filter:drop-shadow(-5px 0 0 red); 
 }

Rendering:

Darüber hinaus kann es auch in Form einer Umriss- oder Bildlaufleiste erreicht werden, aber der Erfahrungseffekt dieser zwei oder Die Kompatibilität ist nicht sehr gut und wird nicht empfohlen. (Teilen von Lernvideos:

CSS-Video-Tutorial

)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie vertikale Linien in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!