我正在对设计师的 psd 布局进行切割和切片。该设计基于 960 网格系统，由多个框组成（一个 960 像素的框用于顶部菜单，2 个 460 像素的框用于两个内容区域，一个 220 像素和一个 720 像素用于另一个内容设置选项等）。所有这些框都基于纯色背景颜色（主体），但它们都有圆角和 10 像素的近似边框，周围都是渐变的。
我正在考虑在这里采取的最佳路线，明智的 html，同时记住它当然应该验证，良好的语义等。
有什么想法/意见吗？
问问题
7216 次
3 回答
7
我正在考虑在这里采取的最佳路线，明智的 html，同时记住它当然应该验证，良好的语义等。
最好的方法是使用纯 CSS3 添加圆角和渐变。
好处：
- 不需要额外的、语义上毫无意义的蹩脚标记
- 无需图像
- 易于实施和维护
- 能够为不支持 CSS3 的旧浏览器优雅降级
缺点：_
- 不适用于所有浏览器
这真的取决于你。
如果您希望您的网站在每个浏览器中看起来都完全相同，那么 CSS3 不是一个选项——您将不得不依赖难以维护的图像和臃肿的标记。
但是，如果您不介意为旧浏览器的用户提供稍微不同但仍然不错的设计，那么 CSS3 绝对是要走的路。
“CSS3”渐变：
- http://webkit.org/blog/175/introducing-css-gradients/
- https://developer.mozilla.org/en/CSS/-moz-linear-gradient
- https://developer.mozilla.org/en/CSS/-moz-radial-gradient
CSS3 圆角：
于 2010-01-17T13:25:23.190 回答
1
这不会在 IE6 和仅使用CSS 的所有网络浏览器中完美运行。您需要获取 JavaScript 才能使其在所有浏览器中工作。有一些jQuery插件可以在运行中转角，适用于所有网络浏览器，无需任何额外的图像或 CSS。我对这个 jQuery Corner 插件有很好的体验。
于 2010-01-17T13:58:03.473 回答
0
我建议尝试 JavaScript 库 DD_roundies ( http://www.dillerdesign.com/experiment/DD_roundies/ )。大多数浏览器已经支持 CSS3 中指定的圆角，并且 DD_roundies 也添加了对不支持的浏览器（如 IE）的支持。
于 2010-01-17T13:30:19.357 回答