1つの境界線のみのアウトライン

はめ込み枠をHTML要素に適用する方法。ただし、その片側だけに適用します。これまで、画像を使用してそれを実行し（GIF / PNG）、それを背景として使用してストレッチし（repeat-x）、ブロックの上部から少し離して配置していました。最近、アウトラインCSSプロパティを発見しました。これはすばらしいことです。しかし、ブロック全体を囲んでいるようです...このoutlineプロパティを使用して、1つの境界線だけでそれを行うことは可能ですか？また、そうでない場合は、背景画像を置き換えることができる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を作成しました。

インセット

以下のためにはめ込みボーダー、使用はめ込みキーワードを。これにより、はめ込み線が上に配置されます。

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;

私はこれが古いことを知っています。しかし、ええ。私はジョナの答えよりもはるかに短い解決策を好みます

[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

私がきちんとあなたのコメントを得ているなら