如何使用 HTML 和 CSS 创建浮雕边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6329352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create embossed borders using HTML and CSS?
提问by 23986294
Some GUIs use boxes with embossed borders to group widgets.
一些 GUI 使用带有浮雕边框的框来对小部件进行分组。
How do I create this look with HTML and CSS?
如何使用 HTML 和 CSS 创建这种外观？
An embossed border is one that creates the illusion that an element comes forward out of the page in 3D. It is often created by making the top and left border lighter and the bottom and right border darker.
浮雕边框会产生一种错觉，即元素以 3D 形式出现在页面之外。它通常是通过使顶部和左侧边框变亮并使底部和右侧边框变暗来创建的。
回答by BoltClock
Most GUIs I see use a style similar to CSS's border-style: groovefor group boxes.
我看到的大多数 GUI 都使用类似于 CSS 的border-style: groove组框样式。
If you need to use a group box for your HTML forms, use <fieldset>with <legend>for the group label.
如果您需要为 HTML 表单使用分组框，请使用<fieldset>with<legend>作为组标签。
回答by Tak
There's quite a few methods, especially with modern browsers.
有很多方法，尤其是现代浏览器。
The simplest is light/dark borders (increase pixels for a chunkier look):
最简单的是浅色/深色边框（增加像素以获得更厚实的外观）：
.box {
border-top: #ccc 1px solid;
border-right: #ccc 1px solid;
border-bottom: #777 1px solid;
border-left: #777 1px solid;
}
For anything more complicated then background images can be used on the box. This provides the best browser compatibility. The All-Expandable Boxhas a good demo.
对于任何更复杂的东西，可以在盒子上使用背景图像。这提供了最佳的浏览器兼容性。该全可扩展盒具有良好的示范。
With CSS3 you can add rounded corners, drop shadows and all sorts of effects.
使用 CSS3，您可以添加圆角、阴影和各种效果。
Also if you're using jQuery elements in widget boxes, then the jQuery UI packs come with some nice skins and easy grouping/boxes.
此外，如果您在小部件框中使用 jQuery 元素，那么jQuery UI 包带有一些漂亮的外观和简单的分组/框。
回答by tsimbalar
You may want to have a look at the <fieldset>tag.
你可能想看看的<fieldset>标签。
Definition and Usage
The tag is used to logically group together elements in a form.
The tag draws a box around the related form elements.
The tag defines a caption for the fieldset element.
定义和用法
标签用于将表单中的元素按逻辑分组在一起。
该标签在相关的表单元素周围绘制一个框。
该标签定义了 fieldset 元素的标题。
回答by Quentin
One of the various border-stylevalue other than "solid", "dotted" and "dashed" will probably give you what you want.
除了“solid”、“dotted”和“dashed”之外的各种边框样式值之一可能会给你你想要的。
