如何在一個HTML元素中應用一個嵌入邊框，但是僅僅是在它的一邊。 到目前為止，我一直使用一個圖像(GIF/PNG)來做這件事，然后我將使用它作為背景，并拉伸它(重復-x ),并定位在離我的塊的頂部稍遠的位置。 最近發現了大綱CSS屬性，太棒了！但似乎環繞了整個街區... 有沒有可能只在一個邊框上使用這個outline屬性呢？ 另外，如果沒有，你有什么CSS技巧可以替換背景圖片嗎？(這樣我可以稍后使用CSS等個性化輪廓的顏色)。

這是我試圖實現的一個形象: http://exiledesigns.com/stack.jpg

您可以使用框陰影在一側創建一個輪廓。像輪廓一樣，盒形陰影不會改變盒形模型的大小。

這在頂部放了一條線:

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

我做了一個jsFiddle，你可以在這里查看它的運行情況。

語法是box-shadow: offset-x | offset-y |模糊半徑|顏色

鑲入物

對于插入邊框，使用inset關鍵字。這將在頂部插入一條線:

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

可以使用逗號分隔的語句添加多行。這將在頂部和左側放置一條插入線:

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

關于框陰影如何工作的更多細節，請查看MDN頁面。

大綱確實適用于整個元素。

現在我看到了你的形象，下面是實現的方法。

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

嘗試陰影(如邊框)+邊框

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

我有另一個很棒的解決方案，也許對某些人有用

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

<div class="button">
  Content
</div>

我知道這很老了。但是沒錯。我更喜歡比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/

只有一側的輪廓不行，你可以使用邊框-左/右/上/下

如果我沒聽錯你的評論的話