css3シャドウの詳しい説明

今回は CSS3 シャドウについて詳しく説明します。 CSS3 シャドウを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

box-shadow

パラメータ:
h-shadow (必須): 水平方向の影の位置、負の値が許可されます
v-shadow (必須): 垂直方向の影の位置、負の値が許可されます
blur (オプション): ぼかし距離
Spread (オプション): 影のサイズ
color (オプション): 影の色
inset (オプション): 外側の影 (アウトセット) を内側の影に変更
例:

<style>
   .effect{
       position: relative;
       width: 800px;
       height: 200px;
       background-color: #fff;
       box-shadow: 0px 1px 4px rgba(0,0,0,0.3)
       ,0px 0px 40px rgba(0,0,0,0.1) inset;  //水平和垂直阴影的值都设置为0，阴影会从中间发散至四周。
   }
    .effect:after,.effect:before{
        position: absolute;
        content: &#39;&#39;;
        background: #fff;
        top:50%;
        bottom:0;
        left: 10px;
        right: 10px;
        box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
        z-index: -999;
        border-radius: 100px/10px;
   }</style><div class="effect"></div>

この記事の事例を読んだことがあるはずです。あなたはその方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Require.jsの詳細な説明

JSを使用して並べ替えアルゴリズムを実装する

Javascriptのシングルトンモード

JSの正規表現の使用方法

以上がcss3シャドウの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。