CSS の興味深いトピックについて話しましょう (1) -- 左側の垂直バーを実装する方法

このシリーズを開始して、いくつかの興味深い CSS トピックについて説明します。実用性はさておき、いくつかのトピックは、問題を解決するためのアイデアを広げることを目的としています。また、見落とされがちな CSS の詳細も含まれています。

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

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

より多くの解決策が得られることを期待して、Github に収集してブログに投稿してください。

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

単一のラベルが div:

であると仮定します。

リーリー

は次のように定義されます 普遍的 CSS:

リーリー

方法 1: 境界線

これが一番考えやすいはずです

リーリー

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

before 与 after 擬似要素を含む 1 つのラベルは、実際には 3 つのラベルとしてカウントされます。これは、この質問では、擬似要素を使用して簡単に完成させることができます。

リーリー

方法 3: アウターボックス - シャドウ

ボックスシャドウbox-shadow 大部分人都只是用了生成阴影，其实阴影可以有多重阴影，阴影不可以不虚化，这就需要去了解一下 box-shaodw 的每一个参数具体作用。使用 box-shaodw問題解決

リーリー

方法 4: インナーボックス - シャドウ

ボックスシャドウには、内側のシャドウを設定するためのパラメータinsetもあり、これも実行できます:

リーリー

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

drop-shadow 是 CSS3 新增滤镜 filter のフィルターの 1 つでも影を生成できますが、数値パラメーターは 3 つしかなく、box-shadow より 1 つ少ないです。

リーリー

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

CSS3 グラデーションを柔軟に使用すると、予期しないグラフィックが多数作成される可能性があります。CSS3 グラデーションは線形グラデーションと放射状グラデーションに分けられ、簡単に解決できます。 リーリー

方法 7: アウトライン

これはほとんど使用されません。アウトラインは、境界線の外側に配置され、要素を強調表示することができます。この方法は次善の策と考えられています。

リーリー

F8、スクロールバー

このメソッドは Little Match の Blue Ideal によって提供されており、スクロール バーのスタイルを変更することで実装されます:

リーリー

実用性はさておき、このスタイルをシミュレートするだけなら、この方法は本当に目を引きます。

上記は思いついた 8 つの方法です。私が思いつかなかった方法もあるかもしれません。ここをクリックしてください。特定の 8 つの実装を確認するには:

コードペン - 単一ラベルの左側に垂直バーを実装する方法

すべての質問は私の Github にまとめられ、より多くの解決策が得られることを期待してブログに投稿されています。

この記事はこれで終わりです。まだ質問や提案がある場合は、オリジナルの記事ですので、記事に何か間違っている点があれば、お知らせください。私にお知らせください。