边框上的框阴影

Question

我有这个问题，我想要一个边框和一个盒子阴影，但阴影必须在边框上。

框架阴影属性在边框结束时开始，是否可以将其移到边框上？

.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">

我的盒子阴影已经尝试插入，但它没有用！

我正在寻找这种效果：

我得到了这个结果：

Answer 1

我认为使用两个重叠的框阴影可以更轻松地实现这一目标

某些like this接近你正在寻找的东西

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

Answer 2

您可以尝试使用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

Answer 3

好像你想要一个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

Answer 4

这个怎么样？

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

Answer 5

首先，你的盒子阴影格式有误。

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

更改为

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

由于Box Shadow Properties的正确格式

  

box-shadow：水平长度垂直长度blur-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>

检查实时演示http://jsbin.com/hex/1/edit