Comment implémenter des lignes verticales en CSS

Méthode d'implémentation : 1. Utilisez l'attribut border-left ou border-right pour implémenter ; 2. Utilisez des pseudo-éléments pour implémenter ; 3. Utilisez l'attribut box-shadow pour implémenter ; " à mettre en œuvre ; 5 , implémenté en utilisant le dégradé LinearGradient.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment implémenter des lignes verticales en CSS

html:

<p>实现竖线</p>

css:

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

Méthode 1 : Utiliser border-left ou border-right

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

Rendu :

Méthode 2 : Utiliser un pseudo Éléments à réaliser

Chaque étiquette aura deux pseudo-éléments avant et après, et on utilise souvent ce type d'étiquette pour réaliser quelques petites icônes comme Icon. Ici, nous utilisons des pseudo-éléments, et il sera facile d'obtenir l'effet souhaité.

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

Rendu :

Méthode 3 : Ombre intérieure/extérieure

L'utilisation d'une ombre intérieure ou d'une ombre extérieure peut également obtenir cet effet, mais dans certaines versions de Chrome (par exemple : Chrome/70.0), le bas sera be 1px Aucun problème de compatibilité n'a été rencontré avec d'autres navigateurs.

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

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

Rendu :

Méthode 4 : ombre portée

Nouveau filtre CSS3 L'ombre portée, l'un des filtres du filtre, peut également générer une ombre.

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

Rendu :

Méthode 5 : Dégradé linéaireGradient

.p1 {
    background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px);
  }

Rendu :

De plus, cela peut également être réalisé sous forme de contour ou de barre de défilement, mais l'effet d'expérience de ceux-ci deux ou La compatibilité n'est pas très bonne et n'est pas recommandée.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!