ホームページ ウェブフロントエンド CSSチュートリアル CSS で box-shadow をマスターする: クイックガイド

CSS で box-shadow をマスターする: クイックガイド

Sep 03, 2024 am 11:43 AM

Mastering box-shadow in CSS: A Quick Guide

CSS の box-shadow プロパティは、開発者が HTML 要素に深さと次元を導入する効果的なメカニズムとして機能します。要素に影を組み込むことで、ユーザー インターフェイスのリアルさと視覚的な魅力を高めることができます。この記事では、box-shadow の基礎を詳しく説明し、その応用をマスターするのに役立つ例を提供します。

基本を理解する

box-shadow プロパティは、影の表示方法を定義するいくつかの値で構成されます。基本的な構文は次のとおりです:

box-shadow: offset-x offset-y blur-radius spread-radius color;
ログイン後にコピー
  • offset-x: このパラメータは影の水平方向の変位を定義します。正の値を指定すると影が右に移動し、負の値を指定すると影が左に移動します。
  • offset-y: このパラメータは、影の垂直方向の変位を示します。正の値を指定すると影が下に移動し、負の値を指定すると影が上に移動します。
  • blur-radius (オプション): この設定は影の柔らかさを調整します。値が大きいほど、シャドウがより拡散します。このパラメータが指定されていない場合、デフォルト値は 0 で、明確な影が生成されます。
  • spread-radius (オプション): このパラメータは影の寸法に影響します。正の値を指定すると影のサイズが大きくなり、負の値を指定すると影のサイズが小さくなります。
  • color: この属性は影の色を定義します。 #000、rgba(0,0,0,0.5)、hsl(0, 0%, 50%) などの有効な CSS カラー表現を使用できます。

例: 基本的なボックス シャドウ

ボタンにボックスシャドウを適用する簡単な例を見てみましょう:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
ログイン後にコピー

この場合、影は水平方向と垂直方向に 5px だけ オフセット され、ぼかし半径は 10px で、0.3 の黒で着色されています。不透明度。

例: 差し込みシャドウ

box-shadowinset キーワードをサポートしています。これは要素の内側に影を配置し、凹んだ効果を与えます。

div {
  box-shadow: inset 0 0 10px #000;
}
ログイン後にコピー

ここでは、影が div の内側に配置され、コンテンツが内側に押し込まれたような効果を作成しています。

高度なヒント

  • box-shadow 指定をカンマで区切ることで、複数のシャドウを作成できます。このテクニックを使用すると、複雑なレイヤー状のシャドウ効果を作成できます。
box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;
ログイン後にコピー
  • シャドウ効果は、ホバー インタラクションを生成するために頻繁に使用され、ボタンやカードのインタラクティブ性を高めます。
button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}
ログイン後にコピー

より視覚的なアプローチを好む方は、Box-Shadow CSS Generator をチェックしてください。このツールを使用すると、コードを記述したりプリセットを保存したりすることなく、カスタムのボックス シャドウ エフェクトを簡単に作成できます。

以上がCSS で box-shadow をマスターする: クイックガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

WordPressブロックと要素にボックスシャドウを追加します

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

満足している属性を持つインラインテキストエディターを作成します

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

最初のカスタムSvelteトランジションを作成します

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

node.jsとexpressのMulterを使用してファイルアップロードします

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

GraphQLキャッシングの使用

ショー、Don' t Tell ショー、Don' t Tell Mar 16, 2025 am 11:49 AM

ショー、Don' t Tell

See all articles