このシリーズを開始して、いくつかの興味深い 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 グラデーションは線形グラデーションと放射状グラデーションに分けられ、簡単に解決できます。 リーリー

リーリー

リーリー

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

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

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

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

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