Un moyen de déclarer une taille / bordure partielle à une boîte?

Question 1

Un moyen de déclarer une taille / bordure partielle à une boîte en CSS? Par exemple, une boîte avec 350pxqui montre seulement une bordure en bas dans ses premiers 60px. Je pense que cela pourrait être très utile.

Exemples:

entrez la description de l'image ici

Question 2

Pas vraiment. Mais il est très facile d'obtenir l'effet d'une manière qui se dégrade gracieusement et ne nécessite aucun balisage superflu:

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>

Développer l'extrait

Question 3

Je sais, cela est déjà résolu et des pixels ont été demandés. Cependant, je voulais juste partager quelque chose ...

Les éléments de texte partiellement soulignés peuvent facilement être obtenus en utilisant display:tableoudisplay:inline-block

^{(Je ne l'utilise tout simplement pas display:inline-blockparce que, oui vous savez, l' 4pxécart gênant ).}

Éléments textuels

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}

<h1>Foo is not equal to bar</h1>

Développer l'extrait

Le centrage , display:tableil est impossible de centrer l'élément avec text-align:center.
Travaillons avec margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

<h1>Foo is not equal to bar</h1>

Développer l'extrait

Eh bien , c'est bien, mais ce n'est pas partiellement .
Comme le bookcasey l'a déjà introduit, les pseudo-éléments valent de l'or.

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>

Développer l'extrait

Décalé , le soulignement est aligné à gauche maintenant. Pour le centrer, il suffit de pousser le pseudo-élément de la moitié de son width( 50% / 2 = 25%) vers la droite.

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>

Développer l'extrait

... comme l' a commenté davidmatas , l'utilisation margin:autoest parfois plus pratique que le calcul du margindécalage à la main.

Ainsi, nous pouvons aligner le soulignement à gauche, à droite ou au centre (sans connaître le courant width) en utilisant l'une de ces combinaisons:

Gauche : margin-right: auto _{(ou laissez-le simplement)}
Milieu :margin: auto
À droite :margin-left: auto

Exemple complet

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

Développer l'extrait

Éléments de niveau bloc

Cela peut être facilement adopté, afin que nous puissions utiliser des éléments de niveau bloc. L'astuce consiste à régler la hauteur des pseudo-éléments à la même hauteur que son élément réel (simplement 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>

Développer l'extrait

Question 4

Voici une autre solution qui repose sur l' linear-gradientendroit où vous pouvez facilement créer tout type de ligne que vous souhaitez. Vous pouvez également avoir plusieurs lignes (de chaque côté par exemple) en utilisant plusieurs arrière-plans:

Afficher l'extrait de code

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

Développer l'extrait

Voici une autre syntaxe pour obtenir la même syntaxe que ci-dessus:

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

Développer l'extrait

Question 5

J'ai utilisé une grille pour dessiner certaines des frontières.

Regardez ici .

Code:

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

Question 6

CSS ne prend pas en charge les bordures partielles. Vous auriez besoin d'utiliser un élément adjacent pour simuler cela.