html - CSS3 : Box shadow just like in the image

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>

我不希望 box-shadow 置顶。

任何帮助都会很棒。

谢谢。

Answer 1

您可以添加多个框阴影，因为您不希望它位于顶部，因此您可以按如下方式设置每一侧的样式，

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>