如何在HTML，CSS中创建浮雕边框？

Question

某些GUI使用框（带有浮雕边框）来分组小部件。我想用HTML和CSS创建这个外观。

Answer 1

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

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

Answer 2

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

最简单的是亮/暗边框（增加像素看起来更粗糙）：

.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 pack会带来一些漂亮的皮肤和简单的分组/框。

Answer 3

您可能需要查看the <fieldset> tag。

  

定义和用法

     

标签用于   逻辑上将元素组合在一起   形式。

     

标签会画一个方框   相关的表格元素。

     

标签定义了标题   fieldset元素。

Answer 4

除了“solid”，“dotted”和“dashed”之外的各种border-style值之一可能会给你你想要的东西。