将内部阴影添加到圆形图像内联css中

时间:2012-12-13 10:29:38

标签: html css image css3

我正在尝试将内部阴影添加到圆形图像中。因为它是为html电子邮件编写的,所以它是内联css。

我有这个:

<td style="border:3px solid #ffffff;border-radius: 50px 50px;box-shadow: 0 0 20px 0px #000000 inset">
 <span><img style="border-radius: 50px 50px;" src="http://media.futuresmag.com/futuresmag/article/2012/05/15/dec29facebook-logo-crop-96x96.jpg"></span>
</td>

我得到了圆形部分和白色边框,我还得到一个应该是阴影的黑色小边框。

谁知道如何解决?

(我选择了一个facebook图标来说明)

TNX!

1 个答案:

答案 0 :(得分:3)

好吧,也许你可以尝试这样做:

<div style="border-radius: 50px 50px;
            background:url(http://media.futuresmag.com/futuresmag/article/2012/05/15/dec29facebook-logo-crop-96x96.jpg);
            width:96px;height:96px;
            box-shadow: inset 0 0 5px 5px #f00;">
</div>

我没有使用IMG,而是使用带背景图像的div,这样我正在使用的框阴影就会应用到图像上。