Html CSS 内嵌边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8452739/
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
CSS Inset Borders
提问by JacobTheDev
I have a quick question on CSS borders.
我有一个关于 CSS 边框的快速问题。
I need to create a solid color inset border. This is the bit of CSS I'm using:
我需要创建一个纯色插图边框。这是我正在使用的 CSS 部分：
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box):
不幸的是，这会创建一个 3D 脊状边框（忽略方块和黑色描述框）：
http://dl.dropbox.com/u/12147973/border-current.jpg
http://dl.dropbox.com/u/12147973/border-current.jpg
This is the goal:
这是目标：
http://dl.dropbox.com/u/12147973/border-boal.jpg
http://dl.dropbox.com/u/12147973/border-boal.jpg
Any ideas?
有任何想法吗？
回答by David says reinstate Monica
You could use box-shadow, possibly:
你可以使用box-shadow，可能：
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}<div id="something"></div>This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadowproperty). To build up the densityof the shadow you can add additional shadows of course:
这样做的优点是它会覆盖 的背景图像div，但它当然是模糊的（正如您对box-shadow属性所期望的那样）。要建立density阴影，您当然可以添加额外的阴影：
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}<div id="something"></div>Editedbecause I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
编辑因为我意识到，我是个白痴，忘了提供简单的解决方案首先，它是使用，否则空的子元素应用在背景的边界：
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}<div id="something">
<div></div>
</div>Editedafter @CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the
box-shadowthat does the spread and will more easily reflect his images.
在 jsfiddle.net/dPcDu/2 中，您可以添加第 4 个 px 参数来
box-shadow进行传播，这样可以更轻松地反映他的图像。
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}<div id="something"></div>回答by Stefan Hans Schonert
I would recomnend using box-sizing.
我会推荐使用box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
回答by podperson
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
要在元素中生成边框插图，我找到的唯一解决方案（我已经尝试了此线程中的所有建议均无济于事）是使用伪元素，例如 :before
E.g.
例如
.has-inset-border:before {
content: "foo"; /* you need something or it will be invisible at least on Chrome */
color: transparent;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
}
The box-sizing property won't work, as the border always ends up outside everything.
box-sizing 属性不起作用，因为边框总是在所有东西之外结束。
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
box-shadow 选项有双重缺点，即不能真正起作用，也没有被广泛支持（如果您关心的话，还需要花费更多的 CPU 周期来渲染）。
回答by Vanessa King
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddleof it—I've made the outer border red and the outline white to differentiate the two:
这是一个老技巧，但我仍然发现最简单的方法是使用带有负值的轮廓偏移（下面的示例使用 -6px）。这是一个小提琴- 我将外边框设为红色，将轮廓设为白色以区分两者：
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
回答by Chris S.
If you want to make sure the border is on the inside of your element, you can use
如果要确保边框位于元素内部，可以使用
box-sizing:border-box;
box-sizing:border-box;
this will place the following border on the inside of the element:
这将在元素内部放置以下边框：
border: 10px solid black;
border: 10px solid black;
(similar result you'd get using the additonal parameter inseton box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
（inset在 box-shadow 上使用 additonal 参数会得到类似的结果，但这个是用于真实边框的，您仍然可以将阴影用于其他用途。）
Note to another answer above: as soon as you use any inseton box-shadowof a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
注意上面另一个答案：只要你使用任何inset在box-shadow某个元素，你被限制为最大的那个元素上2箱阴影和需要进一步遮蔽的包装股利。
Both solutions should as well get you rid of the undesired 3D effects. Also note both solutions are stackable (see the example I've added in 2018)
这两种解决方案都应该让您摆脱不需要的 3D 效果。另请注意，这两种解决方案都是可堆叠的（请参阅我在 2018 年添加的示例）
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>回答by Adam Munns
I don't know what you are comparing to.
不知道你在比较什么。
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent;to whatever items do nothave a border.
但是，与其他无边框项目相比，让边框看起来插入的一种超级简单的方法是border: ?px solid transparent;在任何没有边框的项目上添加一个。
It will make the bordered item look inset.
它将使带边框的项目看起来插入。
回答by Adam Grant
If box-sizingis not an option, another way to do this is just to make it a child of the sized element.
如果box-sizing不是一个选项，另一种方法是让它成为 sized 元素的子元素。
Demo
演示
CSS
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
回答by Jaha Ganiev
You may use background-clip: border-box;
您可以使用背景剪辑：边框框；
Example:
例子：
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
回答by Derrik de Moei
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
所以我试图在悬停时出现一个边框，但它移动了主菜单的整个底部栏，看起来不太好我用以下方法修复它：
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
我希望这会帮助那里的人。
回答by Vladimir Jovanovi?
Simple SCSS solution with pseudo-elements
带有伪元素的简单 SCSS 解决方案
Live demo: https://codepen.io/vlasterx/pen/xaMgag
现场演示：https: //codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>