您可以使用box-shadow在一侧创建轮廓。与outline一样，box-shadow不会更改长方体模型的大小。
这会在顶部添加一行：

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

我做了一个jsFiddle，你可以在那里看看它的行动。
语法为box-shadow: offset-x | offset-y | blur-radius | color

插图

对于inset边框，使用 inset 关键字。这会在顶部放置一个插入行：

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

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

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

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

大纲确实执行apply to the whole element。
现在我看到了您的图像，下面是如何实现它。

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

• （或参见external demo.）*

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

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

尝试使用阴影（类似边框）+边框

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

我知道这很老套。不过是的。我更喜欢简短的答案，而不是吉安娜的答案

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

我有另一个很棒的解决方案，也许它会对某人有用

.button {
    border-bottom: 2px solid transparent;
}
.button:hover {
    border-color: #000000;
}

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
如果我能正确地得到你的评论