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

Question

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

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

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

548 6

html css css3

6 ответов:

Comments

Ничего не найдено.

Giona · Accepted Answer · 2016-07-24 22:25:50

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

Теперь, когда я вижу ваш образ, вот как его достичь.
.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>
(или см. внешняя демо.)

все размеры и цвета просто заполнители, вы можете изменить его, чтобы соответствовать точному желаемому результату.

важное замечание: .элемент должен иметь display:block; (по умолчанию для div) для этого, чтобы работать. Если это не так, пожалуйста, предоставьте свой полный код, чтобы я мог разработать конкретный ответ.

chowey · Accepted Answer · 2015-11-02 01:17:42

можно использовать 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.

Thilanka De Silva · Accepted Answer · 2013-11-07 07:29:54

попробуйте с тенью (как граница ) + граница
border-bottom: 5px solid #fff;
box-shadow: 0 5px 0 #ffbf0e;

thdoan · Accepted Answer · 2013-11-16 09:42:53

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

user3564943 · Accepted Answer · 2018-09-28 14:38:41

Я знаю, что это старый. Но да. Я предпочитаю гораздо более короткое решение, чем Giona answer
[contenteditable] {
    border-bottom: 1px solid transparent;
    &:focus {outline: none; border-bottom: 1px dashed #000;}
}

Database_Query · Accepted Answer · 2012-10-01 13:55:43

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

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