Есть ли способ объявить размер / частичную границу поля?

104

Есть ли способ объявить размер / частичную границу поля в CSS? Например, поле с ним 350pxпоказывает только нижнюю границу в начале 60px. Я думаю, это может быть очень полезно.

Примеры:

введите описание изображения здесь введите описание изображения здесь

css border Давидматас
источник

Ответы:

154

На самом деле, нет. Но добиться эффекта очень легко, изящно деградируя и не требуя лишней разметки:

div {
  width: 350px;
  height: 100px;
  background: lightgray;
  position: relative;
  margin: 20px;
}

div:after {
  content: '';
  width: 60px;
  height: 4px;
  background: gray;
  position: absolute;
  bottom: -4px;
}
<div></div>
Развернуть фрагмент

книжный шкаф
источник
3
Нет ничего лучше, чем отметили правильный ответ без отметки +1. Но я поставил тебе +1! Это было идеальное решение моей проблемы. Спасибо! edit Я предполагаю, что вы могли бы получить +1, если бы кто-то другой был OP и -1. Ну что ж. Я ценю ваш ответ, и это все, что имеет значение, верно ;-)
CWSpear,
7
Как сделать так, чтобы это было в центре, как в его втором примере?
Кэмерон Мартин
Я должен добавить, когда родительский элемент является встроенным блочным элементом с гибкой шириной. Очевидно, когда это фиксированная ширина, это легко.
Кэмерон Мартин
4
Да ладно , я получил желаемый эффект - dabblet.com/gist/e5a78f2d4bf50b6be4d3 . Это позор ::outsideи ::insideпсевдо-элементы еще не доступны, я ненавижу положить в разметке только для укладки, но я не думаю , что есть какой - нибудь другой способ.
Кэмерон Мартин
Это работает! Чтобы использовать его с React, вы не можете использовать contentin :afterкак встроенный стиль или JSS, но он отлично работает с компонентами со стилями.
Рафаэль Пинель
23

Я знаю, что это уже решено, и пиксели были запрошены. Однако я просто хотел кое-чем поделиться ...

Частично подчеркнутые текстовые элементы можно легко получить, используя display:tableилиdisplay:inline-block

(Я просто не использую, display:inline-blockпотому что, да, знаете, неудобный 4px-gap).

Текстовые элементы

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>
Развернуть фрагмент

Центрирование , display:tableделает невозможным центрирование элемента text-align:center.
Давайте поработаем с margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
Развернуть фрагмент

Что ж , это хорошо, но не частично .
Как уже представили книжный шкаф , псевдоэлементы стоят золота.

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
Развернуть фрагмент

Offset , подчеркивание сейчас выравнивается по левому краю. Чтобы центрировать его, просто сдвиньте псевдоэлемент на половину его width( 50% / 2 = 25%) вправо.

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

h1:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  margin-left: 25%;
  width: 50%;
}
<h1>Foo is not equal to bar</h1>
Развернуть фрагмент

... как прокомментировал Давидматас , использование margin:autoиногда более практично, чем вычисление margin-смещения вручную.

Итак, мы можем выровнять подчеркивание влево, вправо или по центру (не зная текущего width), используя одну из этих комбинаций:

  • Слева : margin-right: auto (или просто оставьте это выключенным)
  • Средний :margin: auto
  • Справа :margin-left: auto

Полный пример

.underline {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.underline:after {
  border-bottom: 1px solid #f00;
  content: '';
  display: block;
  width: 50%;
}

.underline--left:after {
  margin-right: auto; /* ...or just leave it off */
}

.underline--center:after {
  margin-left: auto;
  margin-right: auto;
}

.underline--right:after {
  margin-left: auto
}
<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>
Развернуть фрагмент

Элементы блочного уровня

Это может быть легко адаптировано, так что мы можем использовать элементы уровня блока. Хитрость заключается в том, чтобы установить высоту псевдоэлемента на ту же высоту, что и его реальный элемент (просто height:100%):

div {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
div:after {
  border-bottom: 3px solid #666;
  content: '';
  display: block;
  height: 100%;
  width: 60px;
}
<div></div>
Развернуть фрагмент

yckart
источник
2
Отличный ответ. Для :afterмне больше нравится в margin: 0 autoподходе вместо этого , margin-left: 25%потому что он будет работать с любой шириной вы заявляете без необходимости делать математику.
Давидматас
1
@davidmatas Хороший вопрос! Я просто использовал математический способ, чтобы пояснить, как вручную позиционировать его. В этом примере любой может понять, как выровнять его по левому краю / центру / правому краю. Во всяком случае, я добавлю auto- Симплификаторный :)
yckart
16

Вот еще одно решение, в linear-gradientкотором вы можете легко создать любую линию, какую захотите. Вы также можете иметь несколько строк (например, с каждой стороны), используя несколько фонов:

Показать фрагмент кода

Вот еще один синтаксис для достижения того же, что и выше:

.box1 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(#000, #000) top /40% 3px no-repeat, 
   #ccc
}

.box2 {
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(red,red) bottom/ 60% 2px no-repeat, 
    #ccc;
}

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
   linear-gradient(red , red)bottom left/ 60% 2px,
   linear-gradient(blue, blue) 60% 0 / 40% 2px,
   linear-gradient(brown, brown) left/ 3px 30%,
   linear-gradient(orange, orange) right / 3px 40%,
   #ccc;
  background-repeat:no-repeat;
}
<div class="box1">
  Box1
</div>
<div class="box2">
  Box2
</div>
<div class="box3">
  Box3
</div>
Развернуть фрагмент

Темани Афиф
источник
1
Вау ... Я часами возился, чтобы найти способ, чтобы отображались только верхний левый и верхний правый угол "подразумеваемого" окна. : before и: after были слишком ограничены, это мешало позиционированию объекта. Это прекрасное решение!
Воутер
Некоторая справочная информация о том, почему и как это работает: webfx.com/blog/web-design/background-css-shorthand
Wouter
border-radius
Обрезает
2

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

Смотрите здесь .

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Responsive partial borders</title>
    <style>
        /* ungrid without mobile */
        .row{width:100%;display:table;table-layout:fixed;}
        .col{display:table-cell;}

        /* things to change */
        .row{width: 70%; margin: auto;}
        .mid.row > .col{ height: 150px; }

        /* draw box and align text */
        .col{ text-align: center;}
        .top.left.col{
            border-top: 1px solid black;
            border-left: 1px solid black;
        }
        .top.right.col{
            border-top: 1px solid black;
            border-right: 1px solid black;
        }
        .bottom.left.col{
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }
        .bottom.right.col{
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }
        .mid.row > .col{
            border-left: 1px solid black;
            border-right: 1px solid black;
            vertical-align: middle;
        }
        .top.center.col{
            position: relative;
            top: -0.5em;
        }
        .bottom.center.col{
            position: relative;
            bottom: -0.5em;
        }
    </style>
</head>
<body>

    <div class="row">
        <div class="top left col"></div>
        <div class="top center col">Top</div>
        <div class="top right col"></div>
    </div>
    <div class="mid row">
        <div class="col">Mid</div>
    </div>
    <div class="row">
        <div class="bottom left col"></div>
        <div class="bottom center col">Bottom</div>
        <div class="bottom right col"></div>
    </div>  

</body>
</html>
места
источник
@ SverriM.Olsen, поскольку этот человек редактировал код, комментарий устарел
Sagar V
0

CSS не поддерживает частичные границы. Вам нужно будет использовать соседний элемент для имитации этого.

Диодей - Джеймс Макфарлейн
источник
Или псевдоэлемент, который можно сделать полностью с помощью CSS и не добавлять разметку, как показано в ответах выше
О.Г. Шон,