100

はめ込み境界線をHTML要素に適用する方法。ただし、その片側だけに適用します。これまで、私はそれを行うために画像（GIF / PNG）を使用してきましたが、それを背景として使用し、それを引き伸ばして（repeat-x）、ブロックの上部から少し離して配置します。最近、アウトラインCSSプロパティを発見しました。これはすばらしいことです。しかし、ブロック全体を丸で囲んでいるようです...このoutlineプロパティを使用して、1つの境界線だけでそれを行うことは可能でしょうか？また、そうでない場合は、背景画像を置き換えることができるCSSトリックはありますか？（後でCSSなどを使用してアウトラインの色をパーソナライズできるようにするため）。前もって感謝します！

これが達成しようとしていることの画像です：http： //exiledesigns.com/stack.jpg

4

7 に答える 7

149

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;

動作の詳細については、 MDNページbox-shadowを確認してください。

于 2013-09-17T04:34:58.483 に答える
50

アウトラインは確かに要素全体に適用されます。

あなたの画像が表示されたので、これを実現する方法を説明します。

.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のデフォルト）が必要です。そうでない場合は、具体的な回答を詳しく説明できるように、完全なコードを提供してください。

于 2012-10-01T10:56:29.950 に答える
10

Shadow（Like border）+Borderで試してください 

border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;
于 2013-11-07T05:29:54.363 に答える
1

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

[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}
于 2018-09-28T11:38:41.360 に答える
0

入力フィールドに境界線を付け、フォーカスのあるアウトラインを削除し、代わりに境界線の「アウトライン」を作成するのが好きです。

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;
  }
 }
于 2018-12-24T05:42:39.557 に答える
-1

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/

于 2013-11-16T07:42:53.167 に答える
-2

片側だけoutlineが機能しません。border-left/right/top/bottom

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

ここに画像の説明を入力してください

于 2012-10-01T10:55:43.477 に答える