Question

我如何在CSS中执行此框？

它可以通过内容增长..

http://img824.imageshack.us/img824/1953/box.gif

由于

Answer 1

我的建议是使用四个div和四个图像：

HTML：

<div id="container">
    <div id="top"></div>
    <div id="content"></div>
    <div id="bottom"></div>
</div>

CSS：

#container { background: transparent url(shadow-repeat.jpg) repeat-y; }
#top { background: transparent url(top.jpg) no-repeat; }
#content { background: white url(gradient.jpg) repeat-x; }
#bottom { background: transparent url(bottom.jpg) no-repeat; }

shadow-repeat.jpg是包含白色边框和阴影的框中间（垂直）的1px水平切片
top.jpg高到足以覆盖顶部圆角，并包含黄色背景
gradient.jpg是1px垂直切片，包括从top.jpg底部到白色的渐变
bottom.jpg高到足以覆盖底部圆角，并包括白色背景。

这个想法是容器有白色边框和侧面的阴影，它们垂直重复，让你垂直扩展。

顶部div有圆角。因为它是一个jpg，它将覆盖容器背景的硬角，并且正确定位，它仍然看起来很光滑。底部div也是如此。

另一个技巧是水平重复的垂直渐变切片。如果内容div正确定位，您可以对其进行排列，使其看起来仍然平滑。由于它还具有白色背景，因此它将覆盖容器重复背景留在中间的任何残余物。

这可能需要稍微弄清楚边距和定位才能正确，但这是基本的想法

修改请注意，您还必须设置所有div的宽度，以及#top和#bottom的高度。

Answer 2

这将在firefox中运行。在其他浏览器中有类似的属性可以创建相同的效果。 alt text http://i28.tinypic.com/2d2d6jc.jpg

<div style="-moz-box-shadow: 0 0 2em gray;-moz-border-radius: 5px;border:4px solid white;">
    <div style="-moz-border-radius: 5px;background:-moz-linear-gradient(top,  #ff0,  #fff);">
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka <br/>shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka shdflkjhasdklf alksdgh aklsj klsjd<br/>
                aldskfhaklsdhflkashdfklahsdlkfhaklsdhflka shdflkjhasdklf alksdgh aklsj klsjd<br/>
    </div>
</div>

Answer 3

将角落与图像的其余部分分开。内部（有色）应更换为透明背景。这样你将有9层。底层将包含重复的渐变图像，接下来的4个图层将包含重复和对齐的顶部，右侧，底部和左侧边框图像。最后4层将包含角落。但是使用这种方法，这个盒子的背景应该是同质的（没有渐变，没有图像），否则你必须将阴影作为半透明图像放在PNG中，这不适用于圆角和边框。这不适用于IE6。

另一种方法是为每张图像绘制一张表3x3。此方法也适用于IE6。

另一种方法是相邻地堆叠框的9个div，并通过读取中央内容div的大小，使用Javascript设置非内容div的大小。这种方法也适用于IE6。

所有3种方法都可以使用CSS2垂直和水平调整框的大小。

用css构建一个盒子

3 个答案: