CSS - 如何設置漸變陰影？

我有一個使用兩個不同圖像的漸變陰影。每邊一個。我如何設置我的OutsideContainer相對於Center大小？所以，當中心內容擴大時OutsideContainer擴大。CSS - 如何設置漸變陰影？

這樣我的漸變顯示在整個內容區域。

.Left 
{ 
    background-image:url(themes/Light/images/BorderLeft.gif); 
    background-repeat:repeat-y; 

    float:left; 
    background-color:#FF0000;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:745px; 
} 
.Right 
{ 
    background-image:url(themes/Light/images/BorderRight.gif); 
    background-repeat:repeat-y; 
    float:left; 
    background-color:#00FF00;/*Colors work in place of having the picture*/ 
    height:100%; 
    width:8px; 
} 
.OutsideContainer 
{ 
    margin:0 auto; 
    width:761px; 
    height:200px; 
} 

<body> 
<div class="OutsideContainer"> 
    <div class="Left"></div> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
    <div class="Right"></div> 
</div> 
</body>

來源

2011-08-11 P.Brian.Mackey

做你正在嘗試做的更好的辦法是給填充到left和right寬度的外包裝箱中取出左邊和右邊的div並使用兩側設置爲背景圖片你設置的外部div寬度與透明背景的實際股利去。是這樣的：

enter image description here

而CSS看起來就像這樣：

.Center 
{  
    float:left;  
    background-color:#FFFFFF; 
    width:771px; 
} 
.OutsideContainer 
{ 
    padding: 0px 8px 0px 8px; 
    background: url('picture.png') repeat-y; 
    margin:0 auto; 
    width:761px; 
    overflow: hidden; 
}

HTML：

<body> 
<div class="OutsideContainer"> 
    <div class="Center">blah blah <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />blah<br /></div> 
</div> 
</body>

這可能是用CSS來做到這一點的唯一方法。

來源

2011-08-11 20:50:54 Nayish

如果我拿走了寬度，我失去了OutsideContainer創建的居中（認爲div被忽略）。如果我指定最小高度而不是高度，則會丟失「左」和「右」。我確實添加了「溢出」。我仍然無法取得結果。我想要一個固定的寬度，動態的高度。 –

對不起，我以爲你想要的寬度是動態的，我已經編輯了答案，但問題是我認爲你想要的東西可能是不可能的，除非你將左右div的高度設置爲設定的高度。否則你的div依靠div給它們的高度，在那裏設置爲匹配其中的div，這導致瀏覽器大小的div。 – Nayish

我已經有一個固定的高度，這是從父母'OutsideContainer'計算出來的。我不知道如何將高度移動到「Left」和「Right」解決任何問題。你是否想說這根本不可能？ –

CSS - 如何設置漸變陰影？

回答

相關問題