引导图像圈内阴影 [英] Bootstrap Image Circle Inner Shadow

问题描述

如何在引导图片圈中添加内部阴影？

jsfiddle

这样无效..

 < img class =img-circle box-shadalt =src =http://placehold.it/140x140>< img class =img-circle box-shadalt =src =http://placehold.it/140x140> 
 
 .box-shad {box-shadow：
 0 10px 20px＃777 inset，
 0 0 200px＃000 inset，
 0 0 150px＃000 inset， 
 0 0 100px＃000 inset;} 
  

感谢任何想法。

---

解决方案：

将框阴影放在带背景图片的圆形div

解决方案

您可以尝试这样：

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

UPDATE

我不认为设置内部阴影是可能的，因为它是一个图像;

代码：

$ b b

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

How can I add an inner shadow to a bootstrap "image-circle"?

jsfiddle

This doesn't work..

<img class="img-circle box-shad" alt="" src="http://placehold.it/140x140"><img class="img-circle box-shad" alt="" src="http://placehold.it/140x140">

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

Thanks for any ideas.

---

SOLUTION:

Put the box shadow on a circular div with background image set to the image, rather than using an image.

解决方案

You can try something like this:

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

Demo: http://jsfiddle.net/52VtD/1926/

UPDATE

I don't think it's possibile to set an inner shadow because it's an image; you can draw the circle too instead of use an image, so you'll can set the inner shadow.

Code:

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

Demo: http://jsfiddle.net/52VtD/1943/

这篇关于引导图像圈内阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！