Html 如何为圆形图像（css）设置阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9808253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set shadow for round image(css)
提问by FreshBits
I'm new to shadow in css can we set shadows for round image(i mean to a circle image).
我是 css 中的阴影新手，我们可以为圆形图像设置阴影吗（我的意思是圆形图像）。
if it is possible, please give me a code for this in css. thanks in advance
如果可能，请在 css 中给我一个代码。提前致谢
采纳答案by j08691
CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.
CSS3 框阴影将阴影应用于元素，而不是元素的内容。换句话说，如果您有一个图像（矩形）但图像本身是一个圆形，则阴影将应用于矩形图像元素，而不是图像的实际主题。
UPDATE:
更新：
Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle exampleof both drawing a circle and loading a circle, then applying a shadow effect to both.
当然，您始终可以使用 canvas 元素来处理阴影。这是一个jsFiddle 示例，它同时绘制圆和加载圆，然后对两者应用阴影效果。
回答by Frank van Wijk
This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency). You could make a circle with CSS3 and give a shadow, see this jsFiddle.
这是不可能的，因为 CSS 不知道图像内容的形状（例如解释透明度）。你可以用 CSS3 制作一个圆圈并给出一个阴影，参见这个 jsFiddle。
div {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
回答by Ritu Singh
shadows are independent of shapes in css, you can use the shadow property for circle after creating circle. You can use the following code for that, it should work fine
阴影独立于 css 中的形状，您可以在创建圆后使用圆的 shadow 属性。您可以为此使用以下代码，它应该可以正常工作
.circle{
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
回答by Justine Win
Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.
是的，只需在您的图像中添加一个 border-radius: 50% 以及 box shadow 属性:) 在我的 img 标签中工作。
回答by kinath_ru
This thing worked for me. I wanted a rounded shadow around the image 32x32.
这件事对我有用。我想要 32x32 图像周围的圆形阴影。
<a class="media-links" href="">
<img class="media-imgs" src="">
</a>
CSS is like this.
CSS是这样的。
img.media-imgs
{
-webkit-border-radius: 20px;
}
img.media-imgs:hover
{
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-box-shadow: 0 0 18px #91bd09;
}
回答by SpYk3HH
There is great tutorial for box-shadowing with examples here
没有为箱阴影举例伟大的教程在这里
Also, simple css3 for rounding corners in cross browser
此外，用于在跨浏览器中圆角的简单 css3
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
just adjust the pix to the corner roundness you want, or use ems instead
只需将 pix 调整到您想要的圆角，或者使用ems 代替
回答by Qasim
Easy peasy! Set border-radius: 50%;on your image element.
十分简单！设置border-radius: 50%;在您的图像元素上。
It rounds your image tag and it's drop-shadow.
它使您的图像标签四舍五入，并且是阴影。
回答by Abhishek Rawat
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2); // this is must but values are just an example, set accordingly.
border-radius: 50%; //this is must.
Apply this CSS to your tag or its class, and you are done.
将此 CSS 应用于您的标签或其类，您就完成了。
回答by Diodeus - James MacFarlane
CSS does not allow you to add shadows to shapes INSIDE images. CSS has no clue what the image looks like.
CSS 不允许您为 INSIDE 图像的形状添加阴影。CSS 不知道图像是什么样的。
回答by haltabush
There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...) Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/
css3 中有一个属性可以完全满足您的需求。但是，当然，这还没有被所有浏览器实现（IE ...）看看那里：http: //css-tricks.com/snippets/css/css-box-shadow/
