CSSは、影の比較ドロップシャドウやボックスシャドウ：リアルへのWebフロントエンドエントリー

矩形箱影のみ影を作り、ドロップシャドウ領域を生成することができ、オブジェクトは完全に不透明である：ドロップシャドウとシャドウ効果は、箱の影である（ハロー効果）CSS属性は、最大の違いは、両方ともということです同じ形状をシェーディング。使用方法は、二つのCSSプロパティの下にあります：

.drop-shadow {
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))
}

.box-shadow {
    box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.7);
}

影（ハロー効果）であるので、パラメータ（値）がほぼ同じに設定されてもよい両方：上記の例では、左から右へのパラメータ値を表す全ての水平オフセット、垂直オフセット影の色から、ファジー影。次は、さらに、比較のドロップシャドウとボックスシャドウを提供します

罫線と歪みの影響

ドロップシャドウボックスシャドウ、反応の影は、フィレット及び変形効果を接することができます。差がある;ボックス影が完全なブロックとしてフレームとコンテンツの内側にある、そして生成反応の実際の形状のドロップシャドウ境界、固体フレームは実線シャドウ、点線シャドウボックスを破線全体シャドーボックス、およびスタイルの境界線が直接固体の箱であるとして、無視されます。

.box {
    border: 5px solid #262b57;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    transform: rotate(15deg);
    font-size: 40px;
    text-align: center;
    line-height: 120px;
}

.dashed {
    border-style: dashed;
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

背景と透明性

ボックスは、色（透明でない）を設定している場合、ドロップシャドウやボックスシャドウをシャドウ効果が現れるようになります。ボックスの背景は半透明である場合は？私たちは光の中で色の真ん中に、比較的深い周り、画像から影の色を見ることができるので、ボックスシャドウには影響がありません、ドロップシャドウの透明性が影響を受けるであろう推定することができます。

.bk {
    background-color: #ffcc66;
}

.bk-alpha {
    background-color: rgba(255, 204, 102, 0.3);
}

国境を描画（画像境界）

我々はドロップシャドウ画像ボーダー凹凸形状を反映することができる学習した実施例により、ボックスシャドウ境界を直接固体ブロックとみなす吸引さ額縁の形状を無視します。ピクチャーフクロウ透明PNG画像ファイル、画像のフレームの形状を反映しているだけでなく、影がドロップするだけでなく、フレーム形状でフクロウを反映して、ボックスの影は常に国境の原則を堅持して、完全な画像などボックス。

.frame {
    width: 286px;
    height: 240px;
    -moz-border-image: url(frame_green_.png) 25 25 repeat;
    -webkit-border-image: url(frame_green_.png) 25 25 repeat;
    border-width: 25px;
    border-image: url(frame_green_.png) 25 25 repeat;
    border-color: #79b218;
    border-style: inset;
    border-width: 25px;
    box-sizing: border-box;
    display: block;
    margin: 10px;
}

擬似要素

擬似要素ドロップシャドウは、ボックスシャドウ、ダミー素子の形状を反映することができる擬似要素は無視されます。

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
.addition {
    width: 100px;
    height: 100px;
    background-color: #ffcc66;
    margin: 10px 60px;
    position: relative;
    display: inline-block;
}

.addition:before {
    width: 50px;
    height: 50px;
    background-color: #ff8833;
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-left: -40px;
    transform: rotate(45deg);
    margin-top: -10px;
}

.addition:after {
    width: 60px;
    height: 60px;
    background-color: #ff8833;
    margin: 10px;
    content: '';
    display: block;
    transform: rotate(20deg);
    transform: skew(20deg, 20deg);
    top: 5px;
    right: -40px;
    position: absolute;
}

ブロック内のブロックセル

シャドウドロップシャドウは、ブロック内のすべての要素の形状を反映することができる、ボックス影が矩形ブロックの影の直接反応です。

.square {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #ffcc66;
    margin: 20px;
}
.circle {
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 50%;
    background-color: #ff8833;
    margin: 20px;
}

<div class="demo-wrap">
    <div class="drop-shadow">
        <span class="square"></span>
        <span class="circle"></span>
        <p>drop-shadow</p>
    </div>
    <div class="box-shadow">
        <span class="square"></span>
        <span class="circle"></span>
        <p>box-shadow</p>
    </div>
</div>

この技術を終了するWebフロントに興味を持って小さなパートナーは、注意が必要な実践的な内容を開発するためにあなたといくつかを共有することを学ぶ、私たちの研究サークル、作品の第六年に追加することができます。767-273-102秋のドレス。ゼロベースのフロントエンドから起動する方法を学習します。夢を持つ人々のグループは、我々は別の都市にあってもよいが、我々は一緒に歩いていく先端の先端

ドロップシャドウボックスシャドウと異なります

ドロップシャドウない内部境界（挿入図の影）との距離（スプレッド）特性の二種類。支持部には、現在のIEは、ドロップシャドウプロパティをサポートしていません。そして、すでにすべてのブラウザ幅広い支持ボックスシャドウ。