概述只有一个边界

如何将embedded边框应用于HTML元素，但仅限于其一侧。 到目前为止，我一直使用一个图像来做到这一点（GIF / PNG），然后我将它用作背景，并将其拉伸（repeat-x），并从我的块的顶部稍微偏离一点。 最近，我发现了CSS的属性，这太棒了！ 但似乎圈出整个块…是否有可能使用这个大纲属性来做只有一个边界？ 另外，如果没有，你有任何CSS技巧，可以取代背景图像？ （这样我可以稍后使用CSS来个性化轮廓的颜色等）。 提前致谢！

这是一个想要实现的图像： http : //exiledesigns.com/stack.jpg

Answer 1

大纲确实适用于整个元素 。

现在，我看到你的形象，这是如何实现它。

.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> 

Answer 2

您可以使用box-shadow在一侧创build轮廓。 像outline一样， box-shadow不会改变box模型的大小。

这使得上面有一条线：

 box-shadow: 0 -1px 0 #000; 

我做了一个jsFiddle在那里你可以检查出来的行动。

---

INSET

对于embedded边框，请使用inset关键字。 这使得排在最前面的是：

 box-shadow: 0 1px 0 #000 inset; 

可以使用逗号分隔的语句添加多行。 这在上面和左边放置了一条插入线：

 box-shadow: 0 1px 0 #000 inset, 1px 0 0 #000 inset; 

有关box-shadow如何工作的更多详细信息，请查看MDN页面 。

Answer 3

试试阴影（如边框）​​+边框

 border-bottom: 5px solid #fff; box-shadow: 0 5px 0 #ffbf0e; 

Answer 4

关于HTML / CSS的好处是通常有不止一种方法可以达到同样的效果。 这是另一个解决scheme，可以做你想做的事情：

 <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; } 

http://jsfiddle.net/10basetom/uCX3G/1/

Answer 5

只有一边outline不会工作，你可以使用border-left/right/top/bottom

如果我正确得到您的评论