只有一个边框上的轮廓

Question

如何将 内嵌边框 应用到 HTML 元素中，但仅在元素的一侧。直到现在，我一直在使用图像 (GIF/PNG) 来做这件事，然后我将其用作背景并拉伸它 (repeat-x) 并将其放置在离块顶部稍远的位置。最近发现了 outline 这个 CSS 属性，太棒了！但是似乎环绕了整个街区……是否可以使用这个轮廓属性只在一个边界上做这件事？另外，如果没有，您是否有任何可以替换背景图像的 CSS 技巧？ （这样我以后可以使用 CSS 等来个性化轮廓的颜色）。提前致谢！

这是我要实现的目标的图像：http: //exiledesigns.com/stack.jpg

原文由 Corinne 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

（或查看 外部演示。 ）

所有尺寸和颜色都只是占位符，您可以更改它以匹配所需的确切结果。

重要说明：.element 必须有 display:block; （div 的默认值）才能工作。如果不是这种情况，请提供您的完整代码，以便我详细说明具体答案。

原文由 Giona 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 box-shadow 在一侧创建轮廓。像 outline , box-shadow 不会改变盒子模型的大小。

这会在上面放一行：

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

我制作了一个 jsFiddle ，您可以在其中查看它的运行情况。

语法是 box-shadow: offset-x | offset-y | blur-radius | color

---

插图

对于 插入 边框，请使用 inset 关键字。这会在顶部插入一条插入线：

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

可以使用逗号分隔的语句添加多行。这会在顶部和左侧放置一条插入线：

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

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

原文由 chowey 发布，翻译遵循 CC BY-SA 4.0 许可协议