包装图像阴影边框案文

后： After

使用以下两种图像： Using this

And this

我的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%; 
}

我所希望实现的是后图像，但我似乎不能用CSS我在的地方来完成它。我希望图像伸展并根据“完整”表格的宽度包装文本。

SOLUTION：

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

来源

2013-06-11 Si8

为什么不使用CSS的影子？ –

'box-shadow'可用于IE> = 9;如果你不需要支持较老的IE，那么你应该考虑使用它。 – Jacob

我们整个地方目前都在使用IE 8，所以我现在只是在考虑使用这些图片。并使用box-shadow作为IE 9和更新版本的替代方案。 – Si8

如果你想使用的图片，你可以尝试使用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>

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

来源

2013-06-11 18:49:01

如果不是你可以把你的文件在jsfiddle。我会尽力。 :) –

http://jsfiddle.net/FRRXc/（这工作正常在FF /谷歌浏览器，但我没有看到任何东西在IE8） – Si8

小提琴不工作与IE浏览器不太好。它全部被分解。你修好了吗？如果没有，只是在这里采取一个疯狂的想法...尝试把溢出：隐藏;可能听起来很愚蠢..但有时它修复了一些奇怪的事情。 F ^％＃IE !!! –

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

来源

2013-06-11 18:51:29 cimmanon

我会坚持CSS – Si8

好计划。这种方式使用图像往往不灵活。 – cimmanon

加上为什么浪费额外的带宽，虽然它不是很多，但它加起来加载页面。我发布在我的问题中的CSS在FF/Chrome/IE中运行良好> = 9 – Si8

.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不支持cssLevel3，你将不得不使用微软的过滤器。否则，你将不得不将你的纹理分成3部分，left-centerBottom-right，然后重新设计你的html，从容器内部纹理你的元素（比如cimmanon建议）。

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

来源

2013-06-11 18:51:39

当我使用你的代码时，它将阴影放在文本本身上。嗯，不知道为什么它把阴影放在文本上而不是DIV上。 – Si8

继承人JDFIDDLE：http://jsfiddle.net/ZXD3r/（由于某种原因，它不在IE <= 8中工作） – Si8

jsFiddle不是（InternetExplorer <9）友好。 –

包装图像阴影边框案文

回答

相关问题