css 边框上的框阴影

hi3rlvi2 于 12个月前发布在其他

关注(0)|答案(5)|浏览(112)

我有一个问题，我想有一个边界和一个盒子阴影，但阴影必须超过边界。
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">

已经尝试在我的框阴影插入，但它没有工作！
我在寻找这样的效果：

我得到了这个结果：

css

来源：https://stackoverflow.com/questions/21897866/box-shadow-over-border

5条答案

按热度按时间

oo7oh9g91#

我认为这将是更容易实现与两个重叠盒阴影。
like this接近您正在寻找的内容：

box-shadow: 0 0 20px 5px #000000,
    0 0 0 16px rgba(128, 42, 42, 0.98);

赞(0）回复(0）举报 12个月前

xt0899hw2#

看起来你想要一个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;

Fiddle Demo

赞(0）回复(0）举报 12个月前

avwztpqn3#

这个怎么样？

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

赞(0）回复(0）举报 12个月前

c6ubokkw4#

您可以尝试使用inset，然后降低边框的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

赞(0）回复(0）举报 12个月前

crcmnpdw5#

首先，你有错误的框阴影格式。

box-shadow: 0px 0px 20px #000000;

改变

box-shadow: 0px 0px 20px 0 #000000;

由于盒阴影属性的正确格式 *

box-shadow：水平长度垂直长度模糊半径扩展半径;
接下来，为了使它符合您的要求，您必须将图像 Package 在div中。框阴影在边框上不起作用。
这就是风格

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 Markup

<div class="img-box-shadow">
<img src="http://graph.facebook.com/715380382/picture?type=large">
</div>

查看现场演示http://jsbin.com/hex/1/edit

赞(0）回复(0）举报 12个月前

我来回答

css 边框上的框阴影

5条答案

相关问题

热门标签

最新问答