包裝圖像陰影邊框案文

後： 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）友好。 –

包裝圖像陰影邊框案文

回答

相關問題