仅在一个边界上勾勒轮廓

如何将插入边框应用于HTML元素，但仅在其一侧。到现在为止，我一直在使用图像（GIF / PNG）执行此操作，然后将其用作背景并拉伸它（repeat-x），并从块的顶部移开一点。最近，我发现了轮廓CSS属性，这是伟大的！但是似乎将整个块都圈了起来...是否可以仅使用此边框属性在一个边界上执行此操作？另外，如果没有，您是否有任何CSS技巧可以代替背景图片？（这样我以后可以使用CSS等来个性化轮廓的颜色）。提前致谢！

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

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

现在，我看到了您的图像，这是实现它的方法。

.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的默认值）才能起作用。如果不是这种情况，请提供完整的代码，以便我详细说明。

您可以用来box-shadow在一侧创建轮廓。像一样outline，box-shadow不会更改盒子模型的大小。

这将一行放在顶部：

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

我制作了一个jsFiddle，您可以在其中进行操作。

插入

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

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

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

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

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

尝试使用Shadow（Like border）+ Border

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

我知道这很旧。但是，是的。我比Giona回答更短的解决方案

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

我想给我的输入字段一个边框，删除焦点上的轮廓，然后“概述”边框：

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

您还可以使用透明边框进行操作：

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

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

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

只有一侧outline无法使用，您可以使用border-left/right/top/bottom

如果我正确地得到您的评论