将图像阴影包裹到文本边框

Question

在：

在：

使用以下两张图片：

我的HTML：

<table class=full>
<tr>
<td class=showTemp2>
THE INFORMATION GOES HERE<br><br>
WRAPPED AROUND THE TWO SHADOW IMAGES<br><br>
AND WE ARE DONE
</td>
</tr>
</table>

我的CSS：

.full {
width: 900px;
}
.showTemp2 {
    color: #1D2F9F;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 13px;
    font-family: Verdana, 'Source Sans Pro';
    font-weight: plain;
    width: 100%;
}

我想要实现的是 After 图像，但我似乎无法使用我所拥有的CSS来实现它。我希望图像伸展出来并根据“完整”表的宽度包装文本。

解：

-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;

Answer 1

如果您想使用图片......您可以尝试使用3张图片......

顶部的第一张图片...... 第二个图像在y轴上重复（这将随着你的内容的长度而延伸） 底部的第3张图片......

<table class=full>
<tr>
<td class="topPart"></td>
<td class="middlepart">
THE INFORMATION GOES HERE<br><br>
WRAPPED AROUND THE TWO SHADOW IMAGES<br><br>
AND WE ARE DONE
</td>
<td class="lastPart"></td>
</tr>
</table>

这比仅使用两张图片更灵活......

Answer 2

这将是如何使用2个图像，在IE8中工作，而不是使用不必要的标记。但是，您的图像需要修改，因为它们的宽度不同。

http://cssdeck.com/labs/e3vpdl4a

<p class=full>
THE INFORMATION GOES HERE<br><br>
WRAPPED AROUND THE TWO SHADOW IMAGES<br><br>
AND WE ARE DONE
</p>

.full {
  width: 850px;
  padding: 20px;
  position: relative;
}

.full:before {
  position: absolute;
  content: ' ';
  display: block;
  height: 172px;
  width: 100%;
  top: -40px;
  left: -20px;
  background: url(http://i.stack.imgur.com/JMU3n.png) no-repeat;  
}

.full:after {
  position: absolute;
  content: ' ';
  display: block;
  height: 172px;
  width: 100%;
  bottom: -40px;
  left: -20px;
  background: url(http://i.stack.imgur.com/HHtDh.png) left bottom no-repeat;
}

Answer 3

.box-shadow{
    -o-box-shadow:0 1px 4px rgba(0,0,0,.2);
    -moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
    box-shadow:0 1px 4px rgba(0,0,0,.2);
    /* IE */
    *zoom:1;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=10);
}

IE小于9不支持cssLevel3，你将不得不使用微软过滤器。

否则，您必须将纹理分为3个部分，left-centerBottom-right，然后重新设计html以从容器内部构造元素（如来自cimmanon建议）。

对于'msFilter'的解释，我从这里接受了我的测试：http://hedgerwow.appspot.com/demo/shadow