最近、「CSS Revealed」という本を勉強しています。著者は、w3c ワーキング グループの特別招待専門家であり、CSS 言語を設計した委員会のメンバーの 1 人です。この本は、Web ページを作成するときに達成するのが難しい多くの一般的な効果を実現します。この本を読んだ後、「まだこんなこともあるのか」とため息をつくことがよくあります。一緒に効果を学びましょう！
この本では、保守可能な CSS を作成するための最大の要素は、変更を加えるときに編集する場所の数を最小限に抑えることであると述べています たとえば、ボタンの場合、大量のフォントを記述することがあります。 size、line-height、padding のピクセル値と半透明の白い境界線。半透明の境界線を通して本文の背景が表示されます。最初の試みは次のようになります: border: 10px Solid rgba(#255, #255, #255,.5); しかし、完全に不透明であることがわかります。 ！ css3 の背景クリップを使用して、希望する効果を実現できます
境界線を点線に設定すると、この効果がわかります
width: 50px; height: 50px; background-color: white; border: 10px dotted rgba(#255,#255,#255,.5); background-clip: padding-box;
半透明の背景
Background-clip は背景の範囲です。デフォルトでは border-box に設定すると、内側のマージンに沿って背景が切り取られます。
2. 複数の境界線
要素に複数の境界線をラップしたい場合は、多くの場合ラベルのレイヤーを追加する必要がありますが、これにより構造が汚染されてしまいます
ボックス シャドウ ソリューション
background: yellowgreen;box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
アウトライン ソリューション ほとんどの場合、境界線の 2 つのレイヤーのみが必要です。点線はアウトラインに使用でき、負の値をアウトライン オフセットに使用して継ぎ目効果を実現できます。
background: yellowgreen;border: 10px solid #655;outline: 1px dashed #fff;outline-offset: -5px;
ただし、アウトラインの境界線は、border-radius 属性によって生成された丸い角に必ずしも適合するわけではなく、適用されるだけです境界シーン
3. 柔軟な背景の配置 背景をコンテナの右下に配置したい場合は、background-position:rightbottom を使用します。右下隅から広くて高いですか？何をすべきか知っていますか？ css3 は、background-position 属性を拡張します。background-position:right 20px lower 20px; と記述するか、padding を直接指定します。そして、background-origin: content-box; デフォルトは、padding- です。ボックスで背景の位置を指定します。
柔軟な背景の配置
上記の例はほとんどが CSS3 属性であり、互換性の問題がある可能性がありますが、良いアイデアを提供し、フォールバック プランを作成することもできます。他にも面白い内容がたくさんあるので、ぜひ皆さんも読んでみてください！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
