Question

我的缩略图应该有一些阴影，我想用一些绝对定位的div来做这个，因为tables会在IE底部创建空白空间。并且div在Internet Explorer中也不起作用。

以下是我的代码：

<div class="shadow text_box">
    <div class="slt"><font size="-1">&nbsp;</font></div>
      <div class="st"> <font size="-1">&nbsp;</font></div>
      <div class="srt"><font size="-1">&nbsp;</font></div>
    <div class="sl"><font size="-1">&nbsp;</font></div>
       <div class="sr"><font size="-1">&nbsp;</font></div>
    <div class="slb"><font size="-1">&nbsp;</font></div>
      <div class="sb"><font size="-1">&nbsp;</font></div>
      <div class="srb"><font size="-1">&nbsp;</font></div>

//Imagine, here's an image!

</div>

css：

.text_box { background:#F7D76C; }

.shadow { position:relative;padding:0px;margin:8px; }

.slt { width:8px;height:8px;background:url(../img/shadow_left_top_xs.png) no-repeat bottom right; 
       position:absolute;top:-8px;left:-8px;height:8px;width:8px; }

.st { height:8px;background:url(../img/shadow_top_xs.png) repeat-x bottom left; 
      position:absolute;top:-8px;left:0px;height:8px;width:100%; }

.srt { width:8px;height:8px;background:url(../img/shadow_right_top_xs.png) no-repeat bottom left; 
       position:absolute;top:-8px;right:-8px;height:8px;width:8px; }

.sl { width:8px;background:url(../img/shadow_left_xs.png) repeat-y bottom right; 
      position:absolute;top:0px;left:-8px;height:100%;width:8px; }

.sr { width:8px;background:url(../img/shadow_right_xs.png) repeat-y bottom right; 
      position:absolute;top:0px;right:-8px;height:100%;width:8px; }

.slb { width:8px;height:8px;background:url(../img/shadow_left_bottom_xs.png) no-repeat bottom right; 
       position:absolute;bottom:-8px;left:-8px;height:8px;width:8px; }

.sb { height:8px;background:url(../img/shadow_bottom_xs.png) repeat-x bottom left; 
      position:absolute;bottom:-8px;left:0px;height:8px;width:100%; }

.srb { width:8px;height:8px;background:url(../img/shadow_right_bottom_xs.png) no-repeat bottom left; 
       position:absolute;bottom:-8px;right:-8px;height:8px;width:8px; }

Answer 1

添加阴影是一种美学特征，除了看起来更漂亮外，绝对没有真正的后果。

因此，将该功能仅用于支持浏览器，而忽略旧浏览器是非常合理和可接受的。

因此，只需使用box-shadow: 0px 0px 8px 4px black并观看阴影的真实外观。

说真的，如果他们不更新浏览器，没有人会错过图像周围的阴影。

优化IE的CSS：阴影通过绝对定位的div

1 个答案: