CSSで縦線を実装する方法

実装方法: 1. border-left または border-right 属性を使用して実装; 2. 疑似要素を使用して実装; 3. box-shadow 属性を使用して実装; 4. 「filter:drop」を使用-shadow() "達成; 5. LinearGradient グラデーションを使用して実装されています。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css で垂直線を実装する方法

html:

<p>实现竖线</p>

css:

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

方法 1: border-left または border- を使用する右

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

レンダリング:

方法 2: 疑似要素を使用して

各タグを実現するには前後に 2 つの疑似要素があり、これらのタグは Icon などの小さなアイコンを作成するためによく使用されます。ここでは疑似要素を使用します。これにより、目的の効果を簡単に実現できます。

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

レンダリング:

方法 3: 内側/外側のシャドウ

内側のシャドウまたは外側のシャドウを使用します。効果も実現できますが、一部の Chrome (例: Chrome/70.0) バージョンでは、他のブラウザでは発生しない、下の 1 ピクセルとの互換性の問題が発生します。

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

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

レンダリング:

方法 4: ドロップシャドウ

CSS3 新しいフィルター filter フィルターの 1 つ、ドロップシャドウでも影を生成できます。

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

レンダリング:

方法 5: グラデーションリニアグラディエント

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

レンダリング:

また、アウトラインやスクロールバーの形で実装することもできますが、これら2つは体験効果や互換性があまり良くないため、推奨されません。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで縦線を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。