如何在 HTML 中填充边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11911956/
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 to fill in a border in HTML?
提问by bebarules666
I know how to create a border, How do I fill in the rest inside the border with a different color? Here's what I have so far:
我知道如何创建边框，如何用不同的颜色填充边框内的其余部分？这是我到目前为止所拥有的：
<div style="width:200px;height:100px;border:6px outset orange;">text</div>
回答by Arpit Srivastava
Use
用
background:#fff
or any color; and one more advise never use inline css for optimal output use external CSS
或任何颜色；还有一个建议永远不要使用内联 css 以获得最佳输出，请使用外部 CSS
<div id="something">text</div>
#something
{
width:200px;
height:100px;
//likewise
}
回答by Debloper
Here you go: http://jsfiddle.net/XVDkS/
给你：http: //jsfiddle.net/XVDkS/
Explanation: it adds box shadows (at least 2 of them) after the border (with 0 blur). Manipulate the number of shadows & the width of them according to your need. You can as well use blurring, if required. Read the MDN articlefor more details on box-shadows.
说明：它在边框（0 模糊）之后添加框阴影（至少 2 个）。根据您的需要操作阴影的数量和宽度。如果需要，您也可以使用模糊。阅读MDN 文章了解更多关于 box-shadows 的细节。
It's a CSS3 solution, so old IE versions won't play nice (unless you do dark magics on it).
这是一个 CSS3 解决方案，所以旧的 IE 版本不会很好地发挥作用（除非你对它施展黑魔法）。
回答by Sotkra
use the background property, for example:
使用背景属性，例如：
background:#ccc;
which would leave your code looking like this:
这会让你的代码看起来像这样：
<div style="width:200px;height:100px;border:6px solid orange; background:#ccc;">text</div>
回答by Subin
If you mean a background this will help
如果您的意思是背景，这将有所帮助
CSS
CSS
backgound:black;
HTMl with CSS
带有 CSS 的 HTML
<div style="width:200px;height:100px;border:6px outset orange;background:black;">text</div>
回答by Rohan Kumar
you can use groove or ridge in place of outset,
您可以使用凹槽或脊代替开始，
See here is some examples for this on W3schools
请参阅此处的一些示例 W3schools
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
or if you want 2 borders and a different border then you try this
或者如果你想要 2 个边框和一个不同的边框，那么你试试这个
<div style="width:200px;height:100px;border:1px solid #000">
<div style="width:190px;height:90px;border:5px solid orange">
<div style="width:188px;height:88px;border:1px solid #000">
test
</div>
</div>
</div>
Demo is here: http://jsfiddle.net/SPhec/
演示在这里：http: //jsfiddle.net/SPhec/
回答by Anooj P
<div style="width:200px;height:100px;border:6px outset orange;background:#000000">text</div>
use css background property
使用 css 背景属性
