无限长圆的矩形

基本上我的目标是将我的页面内容div封装在一个圆形的矩形中。的排序是这样的：无限长圆的矩形

Top of round rect (White) 
Page content (uses a white rectangular css background) 
Bottom of round rect(White)

那么接下来的页面内容部分可以，只要我需要，并保留圆矩形形状。我只是不确定最好的方式来做到这一点。我尝试添加一个img到pagecontent div的顶部，但透明区域被pagecontent的背景覆盖。谢谢

来源

2010-01-05 jmasterx

我认为这是已经在DOCTYPE。 com http://doctype.com/infinitly-long-round-rectangle – 2010-01-05 16:20:50

我没有得到答案，我在Google上找不到任何答案 – jmasterx 2010-01-05 16:21:35

如果我明白你的意思，你应该把顶部和底部的div内容的div之外：

<html> 
<div id=top>&nbsp;</div> 
<div id=middle> 

... insert page content ... 

</div> 
<div id=bottom>&nbsp;</div> 
</html>

，然后在CSS

#top { 
background : url("top.png") no-repeat bottom center; 
height : <height of image in pixels>px; 
padding : 0; 
margin: 10px auto 0 auto; 
width:<required width> 
} 

#middle { 
background : url("middle.png") repeat-y top center; 
padding : 0; 
margin: 0 auto 0 auto; 
width:<required width> 
} 

#bottom { 
background : url("bottom.png") no-repeat top center; 
height : <height of image in pixels>px; 
padding : 0; 
margin: 0 auto 10px auto; 
width:<required width> 
}

来源

2010-01-05 16:39:38

着名的Sliding Doors技术可能是你所需要的。您可能需要添加一个额外的重复图像，以使其无限长。

来源

2010-01-05 16:21:19

无限长圆的矩形

回答

相关问题