-2

このコードは Codepen で見ました。これは、より大きなプロジェクトの一部です。私の質問は、なぜ box-shadow の "inset" プロパティのセットが 2 つあるのですか? 両方とも同じ機能を持っていますか？それらの1つを削除できますか？事前に助けてくれてありがとう!!

元のプロジェクトへのリンク: http://codepen.io/tholman/pen/BLeJs

.trapdoor {

position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -25px;
width: 200px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
transition: background 400ms ease-in-out;
box-shadow: inset -7px 0px 12px -8px rgba(0, 0, 0, 0.3), inset 7px 0px 12px -8px rgba(0, 0, 0, 0.3);
}
4

2 に答える 2

3

回答: 基本的には、「box-shadow プロパティは、1 つまたは複数のシャドウ効果をカンマ区切りのリストとして記述します。」あなたのコード例では、最初のインセットは右側で、2 番目は左側です。不透明度が 0.3 に設定されているため、影が見えにくくなっています。同じインセットを示すサンプル コードが含まれていますが、青と赤に着色されています。

この Web サイトには、box-shadowスタイルに関する優れた情報がいくつかあります。

クラスのバリエーションを示す CodePen は次のとおりです: http://codepen.io/ctwoodwa/pen/PZwOwQ

.trapdoor {
position: absolute;
top: 50%;
left: 25%;
margin-left: -100px;
margin-top: -25px;
width: 200px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
transition: background 400ms ease-in-out;
box-shadow: inset -7px 0px 12px -8px rgba(0, 0, 255, 1), inset 7px 0px 12px -8px rgba(255, 0, 0, 1);
}
.trapdoor2 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -25px;
width: 200px;
height: 50px;
background: rgba(0, 0, 0, 0.3);
transition: background 400ms ease-in-out;
box-shadow: inset -7px 0px 12px -8px rgba(255, 0, 0, 1);
}
<div class="trapdoor">First inset is blue</div>
<div class="trapdoor2">Second is red</div>

于 2015-12-08T06:42:14.317 に答える
1

inset要素の両側をカバーするように宣言された2 つのスタイルがあり、必要な正しいコントラストを提供し、3D/遠近効果を与えます。
それらの両方を宣言し、それらを等しくオフセットすることは、オブジェクトで自然に観察されるものですが、観察は常に一致するとは限りません。
必要に応じて削除できますが、削除すると、要素の片側だけに複雑な影のスタイルがあることに気付くでしょう...それが必要な場合は、満足できます.
「両方とも同じ機能を持っていますか」
もちろん、それらは同じcssプロパティ宣言です。唯一の違いは、インセット シャドウ宣言に続く x 軸のオフセット値です。この場合、一方は左に -7 ピクセル、もう一方は右に 7 ピクセルです。

于 2015-12-08T06:41:25.887 に答える