老派边框图像 - css2 -

Question

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

这是我的代码：

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

表格似乎没有变成一个连贯的盒子：

还有一个小提琴：http://jsfiddle.net/Cz29T/ 但是，我不知道如何将图像上传到小提琴..

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

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

Answer 1

尝试使用 IE 的 filter 属性。

您可以参考网址 http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx">链接

IE 的 box-shadow 示例：

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