CSS3：盒子阴影就像在图像中一样

Question

我有一张图片。我希望像图像一样有盒子阴影。

我试过下面的代码。

.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>

我不希望盒子阴影到顶部。

任何帮助都会很棒。

谢谢。

Answer 1

试试这个;希望它适合你;

.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);

}

Answer 2

我希望这就是你要找的东西。您可以根据自己的喜好改变不透明度

.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>

Answer 3

你可以添加多个盒子阴影，因为你不希望它在顶部，所以你可以在下面设置每一面的样式，

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>

Answer 4

你可以尝试

statsmodels

Answer 5

我已经使用了你的图像（显示在顶部），我还包裹了你的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>