контур лише на одному кордоні

Як застосувати вставну межу до елемента 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>

(Або див. Зовнішню демонстрацію. )

Всі розміри та кольори - це просто заповнювачі, ви можете змінити їх, щоб відповідати точно бажаному результату.

Важлива примітка : .element повинен мати display:block;(за замовчуванням для div), щоб це працювало. Якщо справа не в цьому, будь ласка, надайте повний код, щоб я міг розробити конкретну відповідь.

Ви можете використовувати box-shadowдля створення контуру з одного боку. Мовляв outline, box-shadowне змінює розмір коробки моделі.

Це ставить рядок зверху:

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

Я створив jsFiddle, де ви можете перевірити його в дії.

ВСТАВИТИ

Для межі вставки використовуйте ключове слово inset . Це ставить вставну лінію зверху:

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

За допомогою операторів, розділених комами, можна додати кілька рядків. Це поміщає вставну лінію зверху та ліворуч:

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

Щоб дізнатися більше про те, як це box-shadowпрацює, перегляньте сторінку MDN .

Спробуйте за допомогою Тіні (як кордон) + Кордону

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

Я знаю, що це старе. Але так. Я вважаю за краще набагато коротше рішення, ніж відповідь Гіони

[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

якщо я отримую належним чином ваш коментар