sadece bir sınırda çerçeve

Bir HTML öğesine, yalnızca bir tarafına eklenmiş kenarlık nasıl uygulanır . Şimdiye kadar, bunu yapmak için bir resim (GIF / PNG) kullanıyordum, daha sonra arka plan olarak kullanacağım ve uzatacağım (tekrar-x) ve bloğumun üstünden biraz uzakta konumlandıracağım. Son zamanlarda, CSS'nin ana hatlarını keşfettim , bu harika! Ama bütün bloğu daire içine alıyor gibi görünüyor ... Bunu sadece bir sınır üzerinde yapmak için bu anahat özelliğini kullanmak mümkün müdür? Ayrıca, yoksa, arka plan görüntüsünün yerini alabilecek herhangi bir CSS numaranız var mı? (böylece taslağın renklerini daha sonra CSS vb. kullanarak kişiselleştirebilirim). Şimdiden teşekkürler!

İşte başarmaya çalıştığım şeyin bir resmi: http://exiledesigns.com/stack.jpg

Anahat gerçekten tüm öğe için geçerlidir .

Şimdi resminizi gördüğüme göre, işte ona nasıl ulaşılacağı.

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

(Veya harici demoya bakın . )

Tüm boyutlar ve renkler yalnızca yer tutuculardır, istediğiniz sonuçla tam olarak eşleşecek şekilde değiştirebilirsiniz.

Önemli not : .element, bunun çalışması için display:block;(bir div için varsayılan) olmalıdır . Durum böyle değilse, lütfen tam kodunuzu sağlayın, böylece belirli bir cevabı ayrıntılandırabilirim.

box-shadowBir tarafta bir taslak oluşturmak için kullanabilirsiniz . Gibi outline, box-shadowkutu modelinin boyutunu değiştirmez.

Bu en üste bir çizgi koyar:

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

Eylemde kontrol edebileceğiniz bir jsFiddle yaptım .

INSET

Bir İçin gömme sınırında kullanmak gömme anahtar sözcüğü. Bu, en üste ek bir satır koyar:

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

Virgülle ayrılmış ifadeler kullanılarak birden çok satır eklenebilir. Bu, üste ve sola ek bir satır koyar:

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

Nasıl box-shadowçalıştığıyla ilgili daha fazla ayrıntı için MDN sayfasına bakın .

Shadow (Like border) + Border ile deneyin

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

Bunun eski olduğunu biliyorum. Ama evet. Giona'nın cevabından çok daha kısa çözümü tercih ederim

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

Girdi alanıma bir kenarlık vermeyi, odaktaki ana hatları kaldırmayı ve bunun yerine sınırı "ana hatlarıyla" çizmeyi seviyorum:

input {
  border: 1px solid grey;

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

Bunu şeffaf bir kenarlıkla da yapabilirsiniz:

input {
  border: 1px solid transparent;

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

HTML / CSS ile ilgili harika olan şey, aynı etkiyi elde etmenin genellikle birden fazla yolu olmasıdır. İşte istediğinizi yapan başka bir çözüm:

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

sadece bir tarafı outlineçalışmaz, kullanabilirsinizborder-left/right/top/bottom

yorumunu düzgün bir şekilde alırsam