Question

我希望盒子阴影只出现在圆角的角落里。但是盒子的阴影始终出现在两侧。我想要如下图所示的东西。

HTML：

int main(int argc, char * argv[])
{
    @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, ({
            ![NSProcessInfo processInfo].environment[@"XCTestConfigurationFilePath"] ?
            @"AppDelegate" :
            nil;                
        }));
    }
}

的CSS：

<div class="img">
    <img src="http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png" alt=""/>
</div>

Answer 1

不完全是你的问题可以解决。

HTML

<div class="shadow">
  <div class="img">
    <img src="http://placehold.it/250x300" alt="" />
  </div>
</div>

CSS

*{
box-sizing: border-box;
}
.shadow {
  width: 250px;
  height: 300px;
  position: relative;
  margin: auto;
}

.img {
  padding: 15px;
  background: #fff;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.shadow {
  position: relative;
}

.shadow:after,
.shadow:before,
.img:after,
.img:before{
    content: "";
    width: 50px;
    height: 50px;
    box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.6);
    position: absolute;
    z-index: -1;
}

.shadow:before,
.shadow:after{
  top: 0;
}
.img:before, .img:after {
    bottom: 6px;
}
.shadow:before{
  left: 0;
}
.shadow:after {
  right: 0;
}
.img:before {
  left: 0;
}

.img:after {
  right: 0;
}

请参阅Fiddle

Answer 2

你可以做的是创建2个伪元素，你将在.img元素下面显示。通过向两个方向旋转它们45度，你可以为两条对角线设置矩形，然后在它们上面放置阴影以获得结果

＆＃13;

body {
  background: #eee;
  }
.img {
    position: relative;
  padding: 10px;
  background: white;
  display: inline-block;
}
.img:before,
.img:after{
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 138%; 
  height: 60px;
  z-index: -1;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  border-radius: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.img:after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

＆＃13;

<div class="img">
  <img src="http://idav.ucdavis.edu/~okreylos/ResDev/SplineApproximation/Examples/Lena3200G.gif" />
</div>

＆＃13;

宽度的138％略小于正方形对角线的长度。这需要调整矩形。

Answer 3

您可以使用24bit transparency创建一个png文件，也可以使用以下CSS代码：

div{
  width: 300px;
  position:relative;
  }

#corner1
{
  background:red;
  width:50px;
  height:10px;
  box-shadow: 0px 0px 20px black;
  position:absolute;
  z-index:-1;
  top:0px;
}

<div class="img">
    <img src="http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png" alt=""/>
    <div id="corner1"></div>

</div>

正如您所看到的，您可以通过复制内部#cornerN div来隐藏图像后面的不同div。当然，在您的情况下，父div将是容器元素（云图像）。

最后，请注意跨浏览器的框阴影属性：通过重新删除-webkit前缀来使用属性“box-shadow”。

仅在角落处的圆形框阴影

3 个答案: