ร่างบนเส้นขอบเดียวเท่านั้น

วิธีใช้เส้นขอบที่ใส่เข้าไปในองค์ประกอบ HTML แต่เพียงแค่ด้านเดียวเท่านั้น จนถึงตอนนี้ฉันใช้รูปภาพเพื่อทำสิ่งนั้น (GIF / PNG) ซึ่งฉันจะใช้เป็นพื้นหลังและยืดมัน (repeat-x) และวางตำแหน่งห่างจากด้านบนของบล็อกเล็กน้อย เมื่อเร็ว ๆ นี้ฉันได้ค้นพบคุณสมบัติ CSS เค้าร่างซึ่งเยี่ยมมาก! แต่ดูเหมือนจะวนไปทั้งบล็อก ... อาจเป็นไปได้ไหมที่จะใช้คุณสมบัติโครงร่างนี้เพื่อทำบนเส้นขอบเพียงเส้นเดียว? นอกจากนี้หากไม่มีคุณมีเคล็ดลับ 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>

(หรือดูการสาธิตภายนอก )

ทุกขนาดและสีเป็นเพียงตัวยึดคุณสามารถเปลี่ยนเพื่อให้ตรงกับผลลัพธ์ที่ต้องการได้

หมายเหตุสำคัญ :. องค์ประกอบต้องมีdisplay:block;(ค่าเริ่มต้นสำหรับ div) เพื่อให้สามารถใช้งานได้ หากไม่ใช่กรณีนี้โปรดระบุรหัสแบบเต็มของคุณเพื่อที่ฉันจะได้อธิบายคำตอบที่เจาะจง

คุณสามารถใช้box-shadowเพื่อสร้างโครงร่างด้านหนึ่ง ชอบoutline, box-shadowไม่เปลี่ยนขนาดของรูปแบบกล่อง

สิ่งนี้ทำให้บรรทัดอยู่ด้านบน:

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

ฉันสร้างjsFiddleที่คุณสามารถตรวจสอบได้ในการดำเนินการ

INSET

สำหรับเส้นขอบที่ใส่เข้าไปให้ใช้คีย์เวิร์ดinset สิ่งนี้ทำให้บรรทัดแทรกอยู่ด้านบน:

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;

ฉันรู้ว่านี่มันเก่าแล้ว แต่ใช่ ฉันชอบวิธีแก้ปัญหาที่สั้นกว่าคำตอบของ 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/

เพียงด้านเดียวที่ใช้outlineไม่ได้ผลคุณสามารถใช้ไฟล์border-left/right/top/bottom

ถ้าฉันได้รับความคิดเห็นของคุณอย่างถูกต้อง