我有这个问题,我想要一个边框和一个盒子阴影,但阴影必须在边界上。
box-shadow属性在边框结束时开始,是否可以在边框上移动?
.border
{
border: solid rgba(128,42,42,.98) 16px;
}
.img-box-shadow
{
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
我的HTML:
<img class="border img-box-shadow" src="img.png">
已经尝试插入我的盒子阴影,但它没有用!
我正在寻找这种效果:
我得到了这个结果:
我认为使用两个重叠的框阴影可以更容易地实现这一点
like this接近你正在寻找的东西
box-shadow: 0 0 20px 5px #000000,
0 0 0 16px rgba(128,42,42,.98);
好像你想要一个inset
盒子阴影,然后你可以使用:
box-shadow: inset 0 -15px 10px -10px #444;
-moz-box-shadow: inset 0 -15px 10px -10px #444;
-webkit-box-shadow: inset 0 -15px 10px -10px #444;
这个怎么样?
.ds-bottom {
position:relative;
overflow:hidden;
border-bottom:1px solid #ddd;
}
.ds-bottom:before {
content: "";
position:absolute;
z-index: 1;
width:96%;
bottom: -10px;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
您可以尝试使用插入然后降低边框的Alpha值。它可能不完全是你想要的,但它很接近。
.border
{
border: solid rgba(128,42,42,.5) 4px;
}
.img-box-shadow
{
-moz-box-shadow: inset 0px 0px 20px #000000;
-webkit-box-shadow: inset 0px 0px 20px #000000;
box-shadow: inset 0px 0px 20px #000000;
}
替代选项(从this question借来)。不要使用.border
并使用它(你可以使用像素值):
.img-box-shadow
{
box-shadow: rgba(0,0,0,.98) 0px 0px 3px, inset rgba(0,0,0,.98) 0px -2px 3px;
}
这是一个JSFiddle
首先,你有盒子阴影格式的错误。
box-shadow: 0px 0px 20px #000000;
改成
box-shadow: 0px 0px 20px 0 #000000;
由于Box Shadow Properties的格式正确
box-shadow:水平长度垂直长度blur-radius spread-radius;
接下来,为了使其符合您的要求,您必须将图像包装在div中。 Box-shadow不会在边境上工作。
这是风格
div {
display:inline-block;
padding:4px; /* Act as border width */
background:rgba(128,42,42,.98); /* Act as border color */
}
.img-box-shadow
{
box-shadow: inset 0px 0px 20px 0 #000000;
-webkit-box-shadow: inset 0px 0px 20px 0 #000000;
-moz-box-shadow: inset 0px 0px 20px 0 #000000;
}
和HTML标记
<div class="img-box-shadow">
<img src="http://graph.facebook.com/715380382/picture?type=large">
</div>