如何使用 HTML 和 CSS 创建浮雕边框？
一些 GUI 使用带有浮雕边框的框来对小部件进行分组。
如何使用 HTML 和 CSS 创建这种外观？
浮雕边框会产生一种元素以 3D 形式从页面中伸出的错觉。它通常是通过使顶部和左侧边框变浅、底部和右侧边框变暗来创建的。
Some GUIs use boxes with embossed borders to group widgets.
How do I create this look with HTML and 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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
有很多方法，特别是对于现代浏览器。
最简单的是明/暗边框（增加像素以获得更厚实的外观）：
对于更复杂的东西，可以在盒子上使用背景图像。这提供了最佳的浏览器兼容性。 All-Expandable Box 有一个很好的演示。
使用 CSS3，您可以添加圆角、阴影和各种效果。
另外，如果您在小部件框中使用 jQuery 元素，那么 jQuery UI 包会附带一些漂亮的皮肤和简单的分组/盒子。
There's quite a few methods, especially with modern browsers.
The simplest is light/dark borders (increase pixels for a chunkier look):
For anything more complicated then background images can be used on the box. This provides the best browser compatibility. The All-Expandable Box has a good demo.
With CSS3 you can add rounded corners, drop shadows and all sorts of effects.
Also if you're using jQuery elements in widget boxes, then the jQuery UI packs come with some nice skins and easy grouping/boxes.
您可能需要查看
You may want to have a look at the
<fieldset>tag.除 " 之外的各种 border-style 值之一实线”、“点线”和“虚线”可能会给你你想要的。
One of the various border-style value other than "solid", "dotted" and "dashed" will probably give you what you want.
我看到的大多数 GUI 都使用类似于 CSS 的
border-style:groove的组框样式。如果您需要对 HTML 表单使用组框，请使用
Most GUIs I see use a style similar to CSS's
border-style: groovefor group boxes.If you need to use a group box for your HTML forms, use
<fieldset>with<legend>for the group label.