garis besar hanya pada satu perbatasan

Bagaimana menerapkan perbatasan inset ke dalam elemen HTML, tetapi hanya di satu sisi saja. Sampai sekarang, saya telah menggunakan gambar untuk melakukan itu (GIF / PNG) yang kemudian akan saya gunakan sebagai latar belakang dan merentangkannya (repeat-x) dan posisikan sedikit dari atas blok saya. Baru-baru ini, saya menemukan properti CSS outline , yang sangat bagus! Tapi sepertinya melingkari seluruh blok ... Apakah mungkin menggunakan properti garis besar untuk melakukannya hanya pada satu perbatasan? Selain itu, jika tidak, apakah Anda memiliki trik CSS yang dapat menggantikan gambar latar belakang? (sehingga saya bisa mempersonalisasi warna garis besar nanti menggunakan CSS, dll). Terima kasih sebelumnya!

Berikut adalah gambar dari apa yang ingin saya capai: http://exiledesigns.com/stack.jpg

Garis memang berlaku untuk seluruh elemen .

Sekarang saya melihat gambar Anda, berikut ini cara mencapainya.

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

(Atau lihat demo eksternal. )

Semua ukuran dan warna hanyalah placeholder, Anda dapat mengubahnya agar sesuai dengan hasil yang diinginkan.

Catatan penting : .element harus memiliki display:block;(default untuk div) agar ini berfungsi. Jika tidak demikian, berikan kode lengkap Anda, sehingga saya dapat menjelaskan jawaban yang spesifik.

Anda dapat menggunakan box-shadowuntuk membuat garis besar di satu sisi. Seperti outline, box-shadowtidak mengubah ukuran model kotak.

Ini menempatkan garis di atas:

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

Saya membuat jsFiddle di mana Anda dapat memeriksanya secara langsung.

SISIPAN

Untuk perbatasan inset , gunakan kata kunci inset . Ini menempatkan baris inset di atas:

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

Beberapa baris dapat ditambahkan menggunakan pernyataan yang dipisahkan koma. Ini menempatkan garis inset di atas dan kiri:

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

Untuk detail lebih lanjut tentang cara box-shadowkerja, lihat halaman MDN .

Coba dengan Shadow (Like border) + Border

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

Saya tahu ini sudah tua. Tapi ya. Saya lebih suka solusi yang jauh lebih pendek, daripada jawaban Giona

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

Saya ingin memberi batas pada bidang masukan saya, menghapus garis pada fokus, dan "membuat garis batas" sebagai gantinya:

input {
  border: 1px solid grey;

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

Anda juga dapat melakukannya dengan bingkai transparan:

input {
  border: 1px solid transparent;

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

Hal hebat tentang HTML / CSS adalah biasanya ada lebih dari satu cara untuk mencapai efek yang sama. Berikut solusi lain yang sesuai dengan keinginan Anda:

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

hanya satu sisi yang outlinetidak akan berfungsi, Anda dapat menggunakanborder-left/right/top/bottom

jika saya mendapatkan komentar Anda dengan benar