CSS を使用して要素の影効果を実現する方法には、特定のコード例が必要です。
Web デザインでは、要素に影効果を追加すると、ページをより鮮やかにし、三次元。 CSS を使用すると、簡単なコードでさまざまな影効果を実現できます。この記事では、要素のシャドウ効果を実現するための一般的な方法をいくつか紹介し、具体的なコード例を示します。
box-shadow プロパティは、CSS3 でボックスの影効果を追加するために使用されるプロパティで、色、位置、サイズ、および色を制御できます。影のぼけ具合など以下は、いくつかの要素の上部に影効果を実装するサンプル コードです:
.box { width: 200px; height: 200px; background-color: #999; box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.5); }
box-shadow:
、影効果が追加されることを示します。 はそれぞれ、影の水平オフセット、垂直オフセット、ブラー半径を表します;
、影を表します。色を表します。0.5 は影の透明度を表します。
.text { font-size: 24px; color: #333; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5); }
、テキストの影効果が追加されることを示します。
.box { width: 200px; height: 200px; background-color: #999; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 30px rgba(0, 0, 0, 0.3); }
複数の影の組み合わせ効果
.box { width: 200px; height: 200px; background-color: #999; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.3) inset; }
以上がCSS を使用して要素にシャドウ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。