очертить только на одной границе

Как применить рамку-вставку к элементу 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, где вы можете проверить это в действии.

ВСТАВИТЬ

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

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

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