如何使兩側的盒子陰影屬性相等的陰影

我想用box-shadow屬性製作一個簡單的（色帶狀）效果，我已將它放在右側，但在左側，效果不是同樣的，我不明白爲什麼！有人有什麼想法嗎？如何使兩側的盒子陰影屬性相等的陰影

我的代碼：JSFIDDLE。

我必須在這裏改變一些東西嗎？

box-shadow: 10px 10px 100px rgba(0, 0, 0, 10);

來源

2013-10-02 Andi Domi

你的意思是這樣嗎？

Demo

（我看不出這似乎是一個帶狀:)

您需要使用position: relative，使其工作，推動TD向更高z-index（）。

另請注意，box-shadow中的第二個參數應該等於兩邊，它是（垂直）y軸。

而使用<div> s這種東西比較好，<table> s只能用於表格數據。

來源

2013-10-02 10:15:26

我在想這個功能區http://taro-psy.justclick.ru/media/content/taro-psy/burned_orange_ribbon-3333px.png：P，謝謝，我用t-index做了td： - 1，它的工作，但你能告訴我爲什麼我必須使第二個參數在雙方相同？爲什麼我必須把位置放在相對位置？再次感謝你的幫助:) –

因爲第二個參數是縱軸：你想讓左邊有一個左邊的影子，右邊有一個正確的影子，但是我想象得到你希望他們的陰影在同一高度，是相似的。兩個負值與兩個正值意味着「左上角」與「右下角」，而您想要「左上角」與「右上角」（或者「左下角」與「右下角」）。需要'position：relative'來使'z-index'工作（因爲它不適用於默認的靜態定位，並且Relative不會像Fixed和Absolute那樣影響頁面）。佩斯：漂亮的絲帶，但只有CSS纔是一種痛苦：D –

如何使兩側的盒子陰影屬性相等的陰影

回答

相關問題