3

一些 GUI 使用带有浮雕边框的框来对小部件进行分组。

如何使用 HTML 和 CSS 创建这种外观？

浮雕边框会产生一种元素以 3D 形式出现在页面之外的错觉。它通常是通过使顶部和左侧边框更亮而底部和右侧边框更暗来创建的。

4

4 回答 4

5

我看到的大多数 GUI 使用类似于 CSS 的样式border-style: groove用于组框。

如果您需要为 HTML 表单使用组框，请使用<fieldset>with<legend>作为组标签。

于 2011-06-13T10:43:19.607 回答
3

有很多方法，尤其是在现代浏览器中。

最简单的是浅色/深色边框（增加像素以获得更厚实的外观）：

.box {
  border-top: #ccc 1px solid;
  border-right: #ccc 1px solid;
  border-bottom: #777 1px solid;
  border-left: #777 1px solid;
}

对于更复杂的东西，可以在盒子上使用背景图像。这提供了最佳的浏览器兼容性。All-Expandable Box有一个很好的演示。

使用 CSS3，您可以添加圆角、阴影和各种效果。

此外，如果您在小部件框中使用 jQuery 元素，那么jQuery UI 包带有一些漂亮的皮肤和简单的分组/框。

于 2011-06-13T10:47:08.420 回答
0

你可能想看看标签。<fieldset>

定义和使用

标签用于将表单中的元素进行逻辑分组。

该标签在相关的表单元素周围绘制了一个框。

该标签定义了 fieldset 元素的标题。

于 2011-06-13T10:43:16.557 回答
-2

除了“solid”、“dotted”和“dashed”之外的各种边框样式值之一可能会给你你想要的。

于 2011-06-13T10:44:33.217 回答