画像があります。私は画像のようにボックスの影を持たせたい。CSS3：ボックスシャドウは画像のようです
私は以下のコードを試しました。
.main_div{
height:260px;
width:300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 3px 8px rgb(67, 176, 238);
}<div class="main_div"></div>私はトップにあるボックスシャドウを望んでいません。
助けがあれば助かります。
ありがとうございます。
あなたは、複数のボックスシャドウを追加することができ、あなたの好みに合わせて不透明度を変更することができます
box-shadow、
box-shadow:offset-x | offset-y | blur-radius | spread-radius | color
.main_div {
height: 260px;
width: 300px;
margin: 50px;
box-shadow: 0px 12px 10px -5px rgba(67, 176, 238, 1), 10px 12px 10px -5px rgba(67, 176, 238, 1), -10px 12px 10px -5px rgba(67, 176, 238, 1);
}<div class="main_div"></div>これを試してください。それがあなたのために働くことを望みます。
.main_div {
height: 260px;
width: 300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 6px 30px rgb(67, 176, 238);
}
あなたの答えをありがとうございました。それは私が投稿した私のイメージと一致しません。 –
これを試してください：box-shadow：0 19px 38px rgba（0,0,0,0.30）、0 15px 12px rgba（0,0,0,0.22）; – sudhanshum
私は、これはあなたが探しているものであると思います。あなたは、あなたが一番上にあなたが以下のように各辺のスタイルを設定できるようすることを望んでいないよう
.main-main{
height: 500px;
width: 500px;
background-color: #bcc0c6;
}
.main_div{
background-color: white;
height:260px;
width:300px;
-webkit-box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
-moz-box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
box-shadow: 0px 10px 15px 0px rgba(224, 13, 34,1);
}<br />
<div class="main-main">
<div class="main_div"></div>
</div>私はボックスの影を上にしたくありません。 –
私は今混乱してしまった:)私はコードを少し変更したが、まだボックスシャドウが何を意味するのか理解していない？ div –
あなたは、私が（一番上に表示）あなたの画像を使用している
.main_div{
height:260px;
width:300px;
-moz-box-shadow: 0px 3px 8px rgb(67, 176, 238);
-webkit-box-shadow: 0px 3px 8px rgb(67, 176, 238);
box-shadow: 0px 3px 6px rgba(32, 79, 182);
}
試すことができますし、私もあなたに似た背景色を設定するために、あなたのdivを包みました。私は（一番下に表示）結果が提供された画像に非常に近いと思う：
.main_div_wrap {
background-color:#eff2f4;
width: 350px;
padding: 25px;
}
.main_div {
background-color:#ffffff;
height: 260px;
width: 350px;
-moz-box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
-webkit-box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
box-shadow: 0px 9px 12px 0px rgb(197, 224, 246);
}
What about this?<img src="https://i.stack.imgur.com/hbltS.png" />
<div class="main_div_wrap">
<div class="main_div"></div>
</div>
の上に影がありません。ボックスシャドウを上にしたくないのです。 –
@Rishi更新されたコードを確認し、ベンダーのプレフィックスを追加してください。コードを編集する際に削除しました。ブラウザサポートのために追加します。 – frnt
@Rishiボックスの両側にスタイルを付けたくない場合は、jsFiddleを確認してください。https://jsfiddle.net/xg6d8bb8/ – frnt