Html 只有一个边框的轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12671898/
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
outline on only one border
提问by Corinne
How to apply an inset borderinto an HTML element, but just only on one side of it. Until now, I've been using an image to do that (GIF/PNG) that I would then use as a background and stretch it (repeat-x) and position a little off from the top of my block. Recently, I discovered the outlineCSS property, which is great! But seems to circle the whole block... Is it possibly to use this outline property to do it on just only one border? Also, if not, do you have any CSS trick that could replace the background image? (so that I could personalize the colors of the outline later using CSS, etc). Thanks in advance!
如何将内嵌边框应用到 HTML 元素中，但仅在其一侧应用。到现在为止，我一直在使用图像（GIF/PNG）来做这件事，然后我将其用作背景并拉伸它（repeat-x）并从我的块顶部放置一点。最近发现了outlineCSS 属性，太棒了！但似乎环绕整个块......是否可能使用此轮廓属性仅在一个边框上执行此操作？另外，如果没有，您是否有任何可以替换背景图像的 CSS 技巧？（以便我稍后可以使用 CSS 等个性化轮廓的颜色）。提前致谢！
Here's an image of what am trying to achieve: http://exiledesigns.com/stack.jpg
这是我试图实现的目标的图像：http: //exiledesigns.com/stack.jpg
采纳答案by Giona
Outline indeed does apply to the whole element.
Outline 确实适用于整个元素。
Now that I see your image, here's how to achieve it.
现在我看到了你的形象，这是实现它的方法。
.element {
padding: 5px 0;
background: #CCC;
}
.element:before {
content: "\a0";
display: block;
padding: 2px 0;
line-height: 1px;
border-top: 1px dashed #000;
}
.element p {
padding: 0 10px;
}<div class="element">
<p>Some content comes here...</p>
</div>(Or see external demo.)
（或查看外部演示。）
All sizes and colors are just placeholders, you can change it to match the exact desired result.
所有尺寸和颜色都只是占位符，您可以更改它以匹配确切的所需结果。
Important note: .element must have display:block;(default for a div) for this to work. If it's not the case, please provide your full code, so that i can elaborate a specific answer.
重要说明： .element 必须具有display:block;（div 的默认值）才能使其工作。如果不是这种情况，请提供您的完整代码，以便我详细说明具体答案。
回答by chowey
You can use box-shadowto create an outline on one side. Like outline, box-shadowdoes not change the size of the box model.
您可以使用box-shadow在一侧创建轮廓。一样outline，box-shadow不会改变盒子模型的大小。
This puts a line on top:
这在上面放了一行：
box-shadow: 0 -1px 0 #000;
I made a jsFiddlewhere you can check it out in action.
我制作了一个jsFiddle，您可以在其中查看它的实际效果。
INSET
插入
For an insetborder, use the insetkeyword. This puts an inset line on top:
对于插图边框，请使用inset关键字。这将在顶部放置一个插入线：
box-shadow: 0 1px 0 #000 inset;
Multiple lines can be added using comma-separated statements. This puts an inset line on the top and the left:
可以使用逗号分隔的语句添加多行。这将在顶部和左侧放置一条插入线：
box-shadow: 0 1px 0 #000 inset,
1px 0 0 #000 inset;
For more details on how box-shadowworks, check out the MDN page.
有关box-shadow工作原理的更多详细信息，请查看MDN 页面。
回答by Thilanka De Silva
Try with Shadow( Like border ) + Border
尝试使用阴影（像边框）+边框
border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;
回答by Andris
I know this is old. But yeah. I prefer much shorter solution, than Giona answer
我知道这是旧的。但是是的。我更喜欢更短的解决方案，而不是 Giona 的回答
[contenteditable] {
border-bottom: 1px solid transparent;
&:focus {outline: none; border-bottom: 1px dashed #000;}
}
回答by Robin Wieruch
I like to give my input field a border, remove the outline on focus, and "outline" the border instead:
我喜欢给我的输入字段一个边框，移除焦点上的轮廓，然后“勾勒”边框：
input {
border: 1px solid grey;
&:focus {
outline: none;
border-left: 1px solid violet;
}
}
You can also do it with a transparent border:
您也可以使用透明边框来实现：
input {
border: 1px solid transparent;
&:focus {
outline: none;
border-left: 1px solid violet;
}
}
回答by thdoan
The great thing about HTML/CSS is that there's usually more than one way to achieve the same effect. Here's another solution that does what you want:
HTML/CSS 的伟大之处在于通常有不止一种方法可以实现相同的效果。这是另一个可以满足您要求的解决方案：
<nav id="menu1">
<ul>
<li><a href="#">Menu Link 1</a></li>
<li><a href="#">Menu Link 2</a></li>
</ul>
</nav>
nav {
background:#666;
margin:1em;
padding:.5em 0;
}
nav ul {
border-top:1px dashed #fff;
list-style:none;
padding:.5em;
}
nav ul li {
display:inline-block;
}
nav ul li a {
color:#fff;
}
回答by Database_Query
only one side outlinewont work you can use the border-left/right/top/bottom
只有一侧outline不起作用，您可以使用border-left/right/top/bottom
if i an getting properly your comment
如果我得到正确的评论
