ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで不規則な影を設定する方法

CSSで不規則な影を設定する方法

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-04-26 17:28:363576ブラウズ

CSSではdrop-shadow属性を利用して不規則な影を設定することができ、要素に「filter:drop-shadow(value value value value color value)」スタイルを設定するだけです。ドロップシャドウ機能は、画像にぼやけた影効果を設定します。

CSSで不規則な影を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

不規則な画像がプロジェクトの背景として使用されており、図に示すように影効果を使用する必要があります:

CSSで不規則な影を設定する方法

ボックスを使用する場合白い背景では半円は現れません。
CSS を使用して影の効果を実現し、ニーズを解決できます。

filter: drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.07));

推奨学習: css ビデオ チュートリアル

以上がCSSで不規則な影を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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