Как применить рамку-вставку к элементу 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), чтобы это работало. Если это не так, предоставьте свой полный код, чтобы я мог дать конкретный ответ.источник
\a0
это неразрывный пробел.Вы можете использовать
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
если я правильно получаю ваш комментарий
источник