您将如何设计 css 和 html 来划分这个圆形小部件？答案

【问题标题】：How would you design the css and html to divide up this rounded widget?您将如何设计 css 和 html 来划分这个圆形小部件？
【发布时间】：2010-07-14 19:09:34
【问题描述】：

我有以下图像，我需要将其转换为我网站上的 HTML 小部件。

alt text http://db.tt/lRJq4s

您将如何划分 div 并拼接图像来制作这个？它需要调整大小。

我是否应该切掉角并有一个左上、右上、上中、左中、右中、左下、中下、右下？类似的 div 结构是什么样的？

我需要能够在顶部栏和底部栏上放置文本，这就是我考虑这种方法的原因。我支持IE7，所以我认为使用图像切片可能是合理的。

我真的很好奇你会如何划分 div 来创建这个小部件结构。

【问题讨论】：

giveupandusetables.com

标签： html css

【解决方案1】：

拥有带有阴影和圆角的真正流畅的盒子是一种痛苦：

http://dev.meagar.net/misc/2198371153.png

<div class="box">
  <div class="nw">1</div>
  <div class="n">2</div>
  <div class="ne">3</div>
  <div class="w">4</div>
  <div class="e">6</div>
  <div class="sw">7</div>
  <div class="s">8</div>
  <div class="se">9</div>

  <div class="content">5</div>
</div>

1-4,6-9 的位置绝对宽度为 top:0、right:0、left:0、bottom:0 的各种组合
1,3,7,9 将是固定宽度/高度，具有非重复背景和高于 2,4,6,8 的 z-index
2,8 是固定高度，100% 宽度，background-repeat:repeat-x
4,6 是固定宽度，100% 高度，background-repeat:repeat-y
5 将是您的内容所在的位置

【讨论】：

【解决方案2】：

根据您的浏览器兼容性要求，这可能不可行，但请查看新的border-image CSS 功能。

【讨论】：

如果圆角不是设计的关键特征，那么 CSS 圆角绝对是最好的选择。

【解决方案3】：

我的代理可能挡住了你的图片，所以我看不到它，但如果它是一个简单的弯角，那么请使用曲线角...

http://www.curvycorners.net/

否则我会做一个容器和一个左边框、中心和右边框的 div。

【讨论】：

【解决方案4】：

这就是我要切片图像的方式：

对于角是 4 个正方形图像（即 20 像素 x 20 像素）每个角都有绝对定位和一个 z-index:1 示例：左上角将是 left:0 top:0 右下角是底部：0 右：0

top-middle 将是一个 10px x（灰色条高度），这将是 CSS 中的 repeat-x 背景图像

bottom-middle 也是 10px x（灰条高度）也是 repeat-x

left 和 right 可以是 10px x 10px 的图像，可以重复-y

您应该有 3 行（顶部中间底部）。顶部和底部不应包含任何 div。

中间应该是 3 个 div。左中右。

我要做的另一件事是仅将图像用于 IE 浏览器并使用 CSS 来创建完全相同的结果。它在现代浏览器中加载速度更快，HTTP 请求更少，同时仍然允许用户在 IE6-7 上停留在石器时代看到相同的结果。

【讨论】：