简单的 CSS Scale-9 布局答案

【问题标题】：Simple CSS Scale-Nine Layout简单的 CSS Scale-9 布局
【发布时间】：2010-05-06 14:47:43
【问题描述】：

这么多年了，我还没有学过 CSS 布局，请耐心等待。我正在尝试创建一个在 Photoshop 中生成的带有圆角的容器。容器的背景是白色的，所以我有八个图像：左上角、上、右上角、右、右下角、下、左下角和左。

边缘有一个阴影，所以是的，我确实需要 8 个边。我将如何在 CSS 中进行布局？我尝试使用表格 + CSS 来做这件事，但失败了。我将如何使用 div 来做到这一点？

编辑： 简单来说，我将如何布置像下面的伪代码这样的东西

[IMG][IMG WIDTH="100%"][IMG]

如果我用 HTML 编写，我的图像会分成三行。我怎样才能把它全部放在一条线上？

【问题讨论】：

是否需要对所有浏览器进行四舍五入？这在没有图像的 CSS3 中是可能的。看看这个CSS3 Generator。我已经完全放弃了使用图像的圆角。为胜利而逐步增强...

标签： css html

【解决方案1】：

我喜欢 Matthew James Taylor 整理的教程。这些教程对圆角没有多大帮助，但它们对 CSS 布局创意很有帮助。

【讨论】：

【解决方案2】：

查看：Curvy Corners，这是一个 jQuery 插件，它会查看您的 CSS 并找到 webkit 的任何 CSS3 属性：-webkit-border-radius: 10px; 并在每个浏览器中使用该 CSS 属性制作任何角落。

我在 IE 上使用它，效果很好！您所要做的就是将 .js 文件添加到您的目录并将其链接到 HTML 的底部，它会为您完成所有工作:)

【讨论】：

【解决方案3】：

【讨论】：

所有这些解决方案都试图使用 5 个或更少的图像来做圆角，即：不是流体解决方案。您知道还有其他地方可以让我仅在 CSS 中对这些项目进行布局吗？
Dan Cederholm (www.simplebits.com) 有一个很好的方法 - simplebits.com/publications/bulletproof/code 请参阅第一版第 5 章的代码示例。