Question

我遇到创建boxshadows的问题.. 我在IE8工作，因此我不能使用CSS3 - CSSPIE也没有帮助，因为它在上传到SharePoint（2007）时基本上搞砸了我的盒子阴影（饼图在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>

该表似乎不是一个连贯的框：

和一个小提琴：http://jsfiddle.net/Cz29T/但是，我没有丝毫的线索如何将图像上传到小提琴......

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

如果有人能告诉我我做错了什么，我将非常感激。这可能是一个新手的错误，但是现在我觉得我已经看了太长时间..

Answer 1

尝试将filter属性用于IE。

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

IE的盒子阴影示例：

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

您可以将Direction值更改为90,180,270,360，以便为complte框显示阴影。

我创建了一个示例代码，其中包含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>

老学校边界图像 - css2 -

1 个答案: