phác thảo chỉ trên một đường viền

Cách áp dụng đường viền chèn vào một phần tử HTML, nhưng chỉ trên một mặt của nó. Cho đến bây giờ, tôi đang sử dụng một hình ảnh để làm điều đó (GIF / PNG) mà sau đó tôi sẽ sử dụng làm nền và kéo dài nó (lặp lại-x) và định vị một chút so với đầu khối của tôi. Gần đây, tôi đã phát hiện ra thuộc tính CSS outline , thật tuyệt! Nhưng dường như bao quanh toàn bộ khối ... Có thể sử dụng thuộc tính phác thảo này để thực hiện chỉ trên một đường viền không? Ngoài ra, nếu không, bạn có thủ thuật CSS nào có thể thay thế hình nền không? (để tôi có thể cá nhân hóa màu sắc của đường viền sau này bằng cách sử dụng CSS, v.v.). Cảm ơn trước!

Đây là hình ảnh về những gì tôi đang cố gắng đạt được: http://exiledesigns.com/stack.jpg

Phác thảo thực sự áp dụng cho toàn bộ phần tử .

Bây giờ tôi nhìn thấy hình ảnh của bạn, đây là cách để đạt được điều đó.

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

(Hoặc xem bản demo bên ngoài. )

Tất cả các kích thước và màu sắc chỉ là trình giữ chỗ, bạn có thể thay đổi nó để phù hợp với kết quả mong muốn chính xác.

Lưu ý quan trọng : .element phải có display:block;(mặc định cho div) để điều này hoạt động. Nếu không đúng như vậy, vui lòng cung cấp mã đầy đủ của bạn để tôi có thể giải thích câu trả lời cụ thể.

Bạn có thể sử dụng box-shadowđể tạo phác thảo ở một bên. Giống như outline, box-shadowkhông thay đổi kích thước của mô hình hộp.

Điều này đặt lên hàng đầu:

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

Tôi đã tạo một jsFiddle nơi bạn có thể kiểm tra nó trong hoạt động.

INSET

Đối với đường viền chèn , hãy sử dụng từ khóa chèn . Điều này đặt một dòng nội dung trên đầu trang:

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

Có thể thêm nhiều dòng bằng các câu lệnh được phân tách bằng dấu phẩy. Điều này đặt một dòng chèn ở trên cùng và bên trái:

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

Để biết thêm chi tiết về cách box-shadowhoạt động, hãy xem trang MDN .

Thử với Shadow (Giống như đường viền) + Đường viền

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

Tôi biết điều này là cũ. Nhưng vâng. Tôi thích giải pháp ngắn hơn nhiều so với câu trả lời của Giona

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

Tôi muốn đặt đường viền cho trường nhập của mình, xóa đường viền trên tiêu điểm và thay vào đó "phác thảo" đường viền:

input {
  border: 1px solid grey;

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

Bạn cũng có thể làm điều đó với một đường viền trong suốt:

input {
  border: 1px solid transparent;

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

Điều tuyệt vời về HTML / CSS là thường có nhiều cách để đạt được hiệu quả tương tự. Đây là một giải pháp khác thực hiện những gì bạn muốn:

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

chỉ một mặt outlinesẽ không hoạt động, bạn có thể sử dụngborder-left/right/top/bottom

nếu tôi nhận được đúng bình luận của bạn