Bootstrap 图像圈内阴影答案

【问题标题】：Bootstrap Image Circle Inner ShadowBootstrap 图像圈内阴影
【发布时间】：2014-01-23 07:18:45
【问题描述】：

如何向引导程序“image-circle”添加内部阴影？

这不起作用..

.box-shad {
  box-shadow: 0 10px 20px #777 inset, 0 0 200px #000 inset, 0 0 150px #000 inset, 0 0 100px #000 inset;
}

&lt;img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"&gt;&lt;img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"&gt;

感谢您的任何想法。

解决方案：

将框阴影放在圆形 div 上，并将背景图像设置为图像，而不是使用图像。

【问题讨论】：

我不认为你可以在没有 javascript 的情况下为图像添加阴影，你可以将代码添加到 div 以查看它的工作原理
好的，关于如何用 js 来做这件事有什么建议吗？在小提琴中看到它会有所帮助

标签： css twitter-bootstrap twitter-bootstrap-3 shadow

【解决方案1】：

你可以试试这样的：

.box-shad {
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
}

演示：http://jsfiddle.net/52VtD/1926/

更新

我不认为设置内部阴影是可能的，因为它是图像；您也可以画圆而不是使用图像，这样您就可以设置内部阴影。

代码：

.box-shad {
    -webkit-box-shadow: inset 0 0 4px #000;
    -moz-box-shadow: inset 0 0 4px #000;
    box-shadow: inset 0 0 4px #000;
}
.circle {
    width: 140px;
    height: 140px;
    display: inline-block;
    border-radius: 50%;
    background-color: #aaa;
}

演示：http://jsfiddle.net/52VtD/1943/

【讨论】：

非常感谢您的想法，但我正在寻找内心阴影.. 有什么想法吗？
@NickB 我不认为这是可能的，因为它是图像，请在编辑中查看替代方案
如何添加到您的班级圈背景图像：url（placehold.it/140x140）；？你得到了带有内阴影的图像
是的，这与@schrodingercat 的评论相结合效果很好。

【解决方案2】：

这对我有用。请尝试一下。

.inner-shadow {
  box-shadow: inset 3px 3px 4px black;
  border-radius: 50%;
}
img {
  width: 100%;
  border-radius: 50%;
  position: relative;
  z-index: -10;
}

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

【讨论】：

【解决方案3】：

我得到的最接近的是：

http://jsfiddle.net/52VtD/1941/

<div class="border">
<a class="shadow img-circle"><img class="img-circle"  src="http://placehold.it/140x140" /></a>

CSS：

.border
{
    padding:10px;
    width:160px;        
}

.shadow
{
    display:block;
    position:relative;
}

.shadow img
{
    display:block;       
}

.shadow::before
{
    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    -moz-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
    box-shadow:inset 0px 0px 5px 2px rgba(0,0,0,0.2);
}

这篇文章可能对http://designbystevie.com/2011/03/applying-css3-inset-box-shadows-to-images/有帮助

【讨论】：