CSS3 の新機能の概要: CSS3 を使用してシャドウ効果を実現する方法

CSS3 の新機能の概要: CSS3 を使用してシャドウ効果を実現する方法

はじめに:
CSS3 の継続的な開発により、現代の Web デザイナーは次のことを行うことができます。簡単に Pure CSS を使用して、これまで画像テクノロジーによってのみ可能であった効果を実現します。その 1 つはシャドウ効果です。この記事では、CSS3 のシャドウ プロパティを紹介し、CSS3 を使用してシャドウ効果を実現するのに役立つコード例を示します。

CSS3 シャドウ プロパティ:
CSS3 の box-shadow プロパティを使用して、HTML 要素にシャドウ効果を追加できます。このプロパティを使用すると、影のオフセット、ぼかし、広がり、色を指定できます。以下は、box-shadow 属性の構文です:

box-shadow: h-shadow v-shadow ブラー スプレッド カラー;

where:

• h -shadow は影の水平オフセットを指定します (負の値にすることができます)。
• v-shadow は影の垂直オフセットを指定します (負の値にすることができます)。
• blur は影のぼかし度 (0 にすることができます) ;
• spread は影の拡張範囲を指定します (0 にすることができます);
• color は影の色を指定し、さまざまな色表現をサポートします。

例 1: 基本的な影効果
次の例は、CSS3 の box-shadow プロパティを使用して基本的な影効果を追加する方法を示しています。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    }
</style>

<div class="box">
    这是一个带有阴影的盒子
</div>

上記の例では、box-shadow 属性を .box 要素に追加することで、基本的な影効果を実装しました。影の水平および垂直オフセットは 0、ぼかしは 10 ピクセル、広がりは 5 ピクセル、カラーは rgba(0, 0, 0, 0.3) です。

例 2: 複数のシャドウ効果
box-shadow プロパティは、要素への複数のシャドウ効果の追加もサポートしています。次の例は、CSS3 box-shadow プロパティを使用して複数の影効果を追加する方法を示しています。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3),
                    0px 0px 5px rgba(0, 0, 0, 0.5);
    }
</style>

<div class="box">
    这是一个带有多重阴影的盒子
</div>

上記の例では、box-shadow を渡しました。属性 複数の影による効果を実現するには、2 つの影パラメータを追加します。最初の影はぼかしが多くて明るく、2 番目の影はぼかしが少なくて暗くなります。

結論:
CSS3 の box-shadow プロパティを使用すると、画像技術を使用せずに HTML 要素に簡単に影効果を追加できます。影のオフセット、ぼかし、拡大、色を調整することで、さまざまなスタイルの影効果を実現できます。この記事が CSS3 を使用して影効果を実現する方法を学ぶのに役立つことを願っています。

以上がCSS3 の新機能の概要: CSS3 を使用してシャドウ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。