html - 旧学校边框图像 - css2 -

Question

我在创建 boxshadows 时遇到问题..我在 IE8 中工作，因此我不能使用 CSS3 - CSSPIE 也没有帮助，因为它在上传到 SharePoint (2007) 时基本上搞砸了我的 boxshadow(pie 在 IE8 中工作正常，在 SharePoint 之外)。我的新方法是创建一个带有边框图像的表格 - 就像过去一样，但不知何故看起来很奇怪..

这是我的代码:

<TABLE cellSpacing=0 cellPadding=0>
    <TBODY>
     <TR>
      <TD style="VERTICAL-ALIGN: bottom; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="lefttopcorner.png" border="0" width=10>&nbsp;&nbsp;</TD>
      <TD style="BACKGROUND-POSITION: 50% bottom; BACKGROUND-IMAGE: url(topside.png); BACKGROUND-REPEAT: repeat-x; HEIGHT: 10px">&nbsp;&nbsp;</TD>
      <TD style="VERTICAL-ALIGN:bottom; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="righttopcorner.png" width=10 border="0">&nbsp;&nbsp;</TD>
     </TR>
     <TR>
      <TD style="BACKGROUND-IMAGE: url(leftside.png); VERTICAL-ALIGN: bottom; BACKGROUND-REPEAT: repeat-y; HEIGHT: 10px">&nbsp;&nbsp;</TD>
      <TD style="BACKGROUND-COLOR: #F4F3F2"> &nbsp;&nbsp; </TD>
      <TD style="BACKGROUND-IMAGE: url(rightside.png); VERTICAL-ALIGN: bottom; BACKGROUND-REPEAT: repeat-y; HEIGHT: 10px">&nbsp;&nbsp;</TD>
     </TR>
     <TR>
      <TD style="VERTICAL-ALIGN: top; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="leftbottomcorner.png" width=10>&nbsp;&nbsp;</TD>
      <TD style="BACKGROUND-POSITION:50%; BACKGROUND-IMAGE: url(bottomside.png); BACKGROUND-REPEAT: repeat-x; HEIGHT: 10px">&nbsp;&nbsp;</TD>
      <TD style="VERTICAL-ALIGN: top; WIDTH: 10px; HEIGHT: 10px"><IMG height=10 alt="" src="rightbottomcorner.png" width=10>&nbsp;&nbsp;</TD>
     </TR>
   </TBODY>
</TABLE>

表格似乎没有成为一个连贯的盒子:

和一把 fiddle :http://jsfiddle.net/Cz29T/但是，我不知道如何将图像上传到 fiddle ..

如果有 CSS 解决方案——请不要是 CSS3——那么我想知道 :)

如果有人能告诉我我做错了什么，我将不胜感激。这可能是一个菜鸟错误，但现在我想我已经看了太久了。

Answer 1

尝试使用 IE 的 filter 属性。

您可以引用 URL http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx">链接

IE 框阴影示例:

.class{
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=150, Color='#333333');
}

您可以将 Direction 值更改为 90、180、270、360 以显示完整框的阴影。

我创建了一个示例代码，其中包含 Border 和 box-shadow。请检查它是否有效。

<Div class="CheckShadow">
Try Box Shadow
</Div>

<style>
.CheckShadow
{
    width:100px; 
    height:100px; 
    box-shadow:4px 4px 5px red; 
    border:5px solid blue;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=red,direction=90,strength=10),
    progid:DXImageTransform.Microsoft.Shadow(color=red,direction=180,strength=10);
}
</style>