実装方法: 1. border-left または border-right 属性を使用して実装; 2. 疑似要素を使用して実装; 3. box-shadow 属性を使用して実装; 4. 「filter:drop」を使用-shadow() "達成; 5. LinearGradient グラデーションを使用して実装されています。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
html:
<p>实现竖线</p>
css:
p{ width: 200px; height: 50px; line-height:50px; text-align: center; background: #ccc; position: relative; }
.p1 { border-left: 5px solid red; border-right: 5px solid red; }
レンダリング:
各タグを実現するには前後に 2 つの疑似要素があり、これらのタグは Icon などの小さなアイコンを作成するためによく使用されます。ここでは疑似要素を使用します。これにより、目的の効果を簡単に実現できます。
.p1::before { content: ""; width: 5px; height:50px; position: absolute; top: 0; left: 0; background: red; }
レンダリング:
内側のシャドウまたは外側のシャドウを使用します。効果も実現できますが、一部の 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; }
レンダリング:
CSS3 新しいフィルター filter フィルターの 1 つ、ドロップシャドウでも影を生成できます。
.p1{ filter:drop-shadow(-5px 0 0 red); }
レンダリング:
.p1 { background-image: linear-gradient(90deg, red 0px, red 5px, transparent 5px); }
レンダリング:
また、アウトラインやスクロールバーの形で実装することもできますが、これら2つは体験効果や互換性があまり良くないため、推奨されません。
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSSで縦線を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。