CSS左縦バーの実装方法コード

問題を解決する際に互換性は考慮されません。質問は自由で、思いついたことを何でも言ってください。問題を解決する際に馴染みのない CSS プロパティがある場合は、できるだけ早く学習してください。

更新し続けて、更新し続けて、更新し続けて、重要なことは3回言います。

質問 1. ラベルを 1 つだけ使用して、次のグラフィックを実装する方法は何通りありますか:

単一のラベルが p であるとします:p:

<p></p>

定义如下通用CSS：

p{
    position:relative;
    width:200px;
    height:60px;
    background:#ddd;
}

法一：border

这个应该是最最最容易想到的了

p{
    border-left:5px solid deeppink;
}

法二：使用伪元素

一个标签，算上 before 与 after 伪元素，其实算是有三个标签，这也是很多单标签作图的基础，本题中，使用伪元素可以轻易完成。

p::after{
    content:"";
    width:5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}

法三：外 box-shadow

盒阴影 box-shadow 大部分人都只是用了生成阴影，其实阴影可以有多重阴影，阴影不可以不虚化，这就需要去了解一下 box-shaodw 的每一个参数具体作用。使用 box-shaodw 解题

p{
    box-shadow:-5px 0px 0 0 deeppink;
}

法四：内 box-shadow

盒阴影还有一个参数 inset ，用于设置内阴影，也可以完成：

p{
    box-shadow:inset 5px 0px 0 0 deeppink;
}

法五：drop-shadow

drop-shadow 是 CSS3 新增滤镜 filter

p{
    filter:drop-shadow(-5px 0 0 deeppink);
}

以下の一般的な CSS:

p{
    background-image:linear-gradient(90deg, deeppink 0px, deeppink 5px, transparent 5px);
}

方法 1: border

これが最も簡単で考えやすいはずです

p{
    height:50px;
    outline:5px solid deeppink;
}
p::after{
    position:absolute;
    content:"";
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:0;
    background:#ddd;
}

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

A before および after 擬似要素を含む label には、実際には 3 つのラベルがあります。これは、この質問で擬似要素を使用する多くの単一ラベルの描画の基礎でもあります。簡単にフィニッシュできます。

p{
    width:205px;
    background:deeppink;
    overflow-y:scroll;
}
p::-webkit-scrollbar{
    width: 200px;
    background-color:#ddd;
}

方法 3: 外側の box-shadow

ボックス シャドウ box-shadow 実際、シャドウには複数のシャドウを含めることはできません。を空にするには、box-shaodw の各パラメータの特定の役割を理解する必要があります。この問題を解決するには、box-shaodw を使用しますrrreee

方法 4: 内側の box-shadow

ボックス シャドウにはパラメータ inset もあり、これが使用されます内側のシャドウを設定するには、次のようにすることもできます。 /code>. シャドウも生成できますが、数値パラメータの数は box-shadow より 1 つ少ない 3 つだけです。 rrreee

方法 6: グラデーション LinearGradient

🎜🎜 CSS3 グラデーションを柔軟に使用すると、多数の予期しないグラフィックスを完成させることができます。この質問は線形グラデーションと放射状グラデーションに分けられます。 🎜🎜 rrreee🎜🎜 方法 7: アウトライン🎜🎜🎜🎜 アウトラインは、要素の周囲に引かれる線であり、要素を強調表示できます。この方法は次善の策と考えられています。 🎜🎜rrreee🎜🎜メソッド8、スクロールバー🎜🎜🎜🎜このメソッドは、リトルマッチの青い理想によって提供され、スクロールバーのスタイルを変更することで実現されます: 🎜🎜rrreee🎜🎜実用性はさておき、これをシミュレートするだけならスタイル、この方法は本当に目を引きます。 🎜🎜🎜🎜上記は思いついた 8 つの方法です。私が思いつかなかった他の方法があることを願っています。ここをクリックしてください。具体的な 8 つの実装: 🎜🎜🎜🎜codepen-single ラベルが左側に垂直 バーの実装方法🎜🎜🎜🎜🎜

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