html - 将图像阴影包裹在文本周围

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

这将是如何使用 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 2

.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);
}

9以下的IE不支持cssLevel3，你将不得不使用微软过滤器。

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

对于“msFilter”的解释，我从这里进行了测试：http: //hedgerwow.appspot.com/demo/shadow

Answer 3

如果你想使用一张图片……你可以尝试使用 3 张图片……

顶部的第一张图片...要在 y 轴上重复的第二张图片（这将随着内容的长度而扩展）底部的第三张图片...

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

这也将比只使用两个图像更灵活......