CSSで片面ドロップシャドウを作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSSで片面ドロップシャドウを作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-01 21:25:13

オリジナル

490 人が閲覧しました

How to Create a One-Sided Drop Shadow with CSS?

片面ドロップシャドウの作成

要素の片側にのみ表示されるドロップシャドウを作成するには、CSS プロパティと疑似要素を利用できます。詳細な解決策は次のとおりです。

::after 疑似要素を使用する

.box {
  position: relative;
  width: 200px;
  height: 100px;
}

.box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 10px #000000;
  z-index: -1;
}

ログイン後にコピー

このコードでは、次の位置に配置されるボックスのクラスを持つ親要素を作成します。要素。次に、位置、サイズ、および box-shadow プロパティを指定して、::after 疑似要素をスタイル設定してドロップシャドウを作成します。メイン要素の背後に影を配置するには、Z インデックスが -1 に設定されます。

グラデーションぼかしの追加

影の外観を強化するには、 box-shadow へのグラデーションブラー:

.box::after {
  ...
  box-shadow: 0px 10px 10px 10px rgba(0, 0, 0, 0.5);
}

ログイン後にコピー

この追加コードは、シャドウにグラデーションブラーを追加し、より繊細でリアルな効果。

以上がCSSで片面ドロップシャドウを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

CSSで片面ドロップシャドウを作成するにはどうすればよいですか?

片面ドロップ シャドウの作成

片面ドロップシャドウの作成