ホームページ > 記事 > ウェブフロントエンド > CSS左縦バーの実装方法コード
問題を解決する際に互換性は考慮されません。質問は自由で、思いついたことを何でも言ってください。問題を解決する際に馴染みのない CSS プロパティがある場合は、できるだけ早く学習してください。
更新し続けて、更新し続けて、更新し続けて、重要なことは3回言います。
単一のラベルが p
であるとします:p
:
<p></p>
定义如下通用CSS
:
p{ position:relative; width:200px; height:60px; background:#ddd; }
这个应该是最最最容易想到的了
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-shaodw
的每一个参数具体作用。使用 box-shaodw
解题
p{ box-shadow:-5px 0px 0 0 deeppink; }
盒阴影还有一个参数 inset
,用于设置内阴影,也可以完成:
p{ box-shadow:inset 5px 0px 0 0 deeppink; }
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: 疑似要素を使用します
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
以上がCSS左縦バーの実装方法コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。