仅限于角落的圆角阴影

我想让阴影仅出现在圆角的圆角处。但是盒子的影子出现在两侧。我想要如下图所示的东西。仅限于角落的圆角阴影

HTML：

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

CSS：

img { 
    -webkit-box-shadow: 0 15px 10px #777; 
    -moz-box-shadow: 0 15px 10px #777; 
    box-shadow: 0 15px 10px #777; 
}

来源

2016-04-21 Nag

看起来你必须使用'border-image'来实现这一点。祝你好运！ – John

您可以将图片保存为带有该阴影的PNG或使用html，您必须将4个方格绝对放置在图像角落，并为它们应用方块阴影 – sTx

不知道在哪里，但我看到过去用过的相同的东西，一个svg。我认为它被用作包含该照片的div的背景图像。 – enhzflep

-1

您可以使用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”。

来源

2016-04-21 07:49:28 LoreV

不完全，但你的问题可以通过其解决。

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

来源

2016-04-21 08:21:31

你可以做的是建立一个您要显示.IMG元素下2伪元素。通过在这两个方向旋转45deg它们你就会有两条对角线的长方形，然后把这些箱子的影子，让您的结果

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

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

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

来源

2016-04-21 09:11:37

仅限于角落的圆角阴影

回答

相关问题