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

Question

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

Примеры:

Answer 1

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

div {
  width:350px; 
  height:100px; 
  background:lightgray; 
  position:relative;
 }
div:after {
  content:''; 
  width:60px; 
  height:4px; 
  background:gray; 
  position:absolute; 
  bottom:-4px;
}

Демо

Answer 2

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

Частично подчеркнутые текстовые элементы могут быть легко достигнуты с помощью display:table или display:inline-block

^{(я просто не использую display:inline-block потому что, да, вы знаете, неловкий 4px пробел).}

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

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>

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

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>

Смещение , подчеркивание выравнивается по левому краю прямо сейчас.Чтобы отцентрировать его, просто нажмите псевдоэлемент на половину его 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>

... как прокомментировал davidmatas , использование 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>

Элементы уровня блока

Это может быть легко адаптировано, так что мы можем использовать элементы уровня блока.Хитрость заключается в том, чтобы установить высоту псевдоэлементов на ту же высоту, что и их элемент real (просто 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>

Answer 3

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

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

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

.box3{
  width: 200px;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
  background: 
    linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
    linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
    linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
    linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
  #ccc
}

<div class="box1">
  Box
</div>
<div class="box2">
  Box
</div>
<div class="box3">
  Box
</div>

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

.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">
  Box
</div>
<div class="box2">
  Box
</div>
<div class="box3">
  Box
</div>

Answer 4

Я использовал сетку для построения прорисовки некоторых границ.

См. здесь .

Код:

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

Answer 5

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