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

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

Примеры:

Ответ 1

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

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

Демо

Ответ 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>

Ответ 3

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

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

Ответ 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>

Ответ 5

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