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 - 如何设置渐变阴影？

回答

相关问题