На одной границе

Как применить рамку вставки в HTML-элемент, но только на одной стороне. До сих пор я использовал изображение для этого (GIF/PNG), которое затем использовал бы в качестве фона и растягивал его (repeat-x) и немного помещал бы с верхней части моего блока. Недавно я обнаружил свойство CSS наброски, и это здорово! Но, кажется, обводят весь блок... Возможно ли использовать это свойство контура, чтобы сделать это только на одной границе? Кроме того, если нет, есть ли у вас какой-либо трюк CSS, который мог бы заменить фоновое изображение? (чтобы я мог персонализировать цвета контура позже с помощью CSS и т.д.). Спасибо заранее!

Вот образ того, чего я пытаюсь достичь: http://exiledesigns.com/stack.jpg

Ответы

Ответ 1

На самом деле структура применима ко всему элементу.

Теперь, когда я вижу ваш образ, вот как его достичь.

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

Ответ 2

Вы можете использовать box-shadow для создания контура с одной стороны. Как outline, box-shadow не изменяет размер модели окна.

Это помещает строку сверху:

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

Я сделал jsFiddle, где вы можете проверить его в действии.

Врезка

Для границы вставки используйте ключевое слово вставки. Это вставляет строку вставки сверху:

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

Несколько строк могут быть добавлены с помощью операторов, разделенных запятыми. Это вставляет строку вставки сверху и влево:

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

Подробнее о том, как работает box-shadow, см. страница MDN.

Ответ 3

Попробуйте использовать тень (как и рамка) + граница

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

Ответ 4

Самое замечательное в 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/

Ответ 5

только одна сторона outline не работает, вы можете использовать border-left/right/top/bottom

если я правильно получаю ваш комментарий