Qualche modo per dichiarare una dimensione / bordo parziale a una scatola?

101

Un modo per dichiarare una dimensione / bordo parziale a una casella in CSS? Ad esempio, una casella con 350pxquesto mostra solo un bordo inferiore nei suoi primi 60px. Penso che potrebbe essere molto utile.

Esempi:

inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine

css  border 
— davidmatas
fonte

Risposte:

152

Non proprio. Ma è molto facile ottenere l'effetto in un modo che si degrada con grazia e non richiede markup superfluo:

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>
Espandi lo snippet

— bookcasey
fonte
3
Non c'è niente come essere contrassegnati come la risposta giusta senza fare +1. Ma ti ho fatto +1! Questa è stata una soluzione perfetta per il mio problema. Grazie! modifica Immagino che avresti potuto essere +1 sarebbe stato OP e -1 da qualcun altro. Oh bene. Apprezzo la tua risposta, e questo è tutto ciò che conta, giusto ;-)
— CWSpear
7
Come si ottiene che questo sia al centro, come nel suo secondo esempio?
— Cameron Martin
Dovrei aggiungere, quando l'elemento genitore è un elemento inline-block di larghezza fluida. Ovviamente quando è a larghezza fissa è facile.
— Cameron Martin
4
Non importa, ho ottenuto l'effetto che volevo: dabblet.com/gist/e5a78f2d4bf50b6be4d3 . È un peccato che gli ::outsidee gli ::insidepseudo-elementi non siano ancora disponibili, odio mettere il markup solo per lo styling, ma non credo che ci sia altro modo.
— Cameron Martin
Funziona! Per usarlo con Reagire, non è possibile utilizzare contentin :aftercome lo stile in linea o JSS, ma funziona bene utilizzando componenti designati.
— Raphael Pinel
23

Lo so, è già stato risolto e sono stati richiesti pixel. Tuttavia, volevo solo condividere qualcosa ...

Gli elementi di testo parzialmente sottolineati possono essere facilmente ottenuti utilizzando display:tableodisplay:inline-block

(Semplicemente non lo uso display:inline-blockperché, sì, lo strano 4pxdivario).

Elementi testuali

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>
Espandi lo snippet

Centrare , display:tablerende impossibile centrare l'elemento con text-align:center.
Lavoriamo con margin:auto...

h1 {
  border-bottom: 1px solid #f00;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
Espandi lo snippet

Bene , è carino, ma non parzialmente .
Come bookcasey già introdotto, gli pseudo-elementi valgono oro.

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>
Espandi lo snippet

Offset , la sottolineatura è allineata a sinistra in questo momento. Per centrarlo, basta spingere lo pseudo-elemento la metà della sua width( 50% / 2 = 25%) a destra.

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>
Espandi lo snippet

... come ha commentato davidmatas , l'uso a margin:autovolte è più pratico che calcolare l' marginoffset a mano.

Quindi, possiamo allineare la sottolineatura a sinistra, a destra o al centro (senza conoscere la corrente width) utilizzando una di queste combinazioni:

  • A sinistra : margin-right: auto (o lascialo spento)
  • Al centro :margin: auto
  • A destra :margin-left: auto

Esempio completo

.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>
Espandi lo snippet

Elementi a livello di blocco

Questo può essere facilmente adottato, in modo da poter utilizzare elementi a livello di blocco. Il trucco è impostare l'altezza degli pseudo-elementi alla stessa altezza del suo elemento reale (semplicemente 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>
Espandi lo snippet

— yckart
fonte
2
Bella risposta. Per il :aftermi piace di più un margin: 0 autoapproccio invece il margin-left: 25%perché funzionerà con qualsiasi larghezza dichiarata senza bisogno di fare calcoli.
— davidmatas
1
@davidmatas Buon punto! Ho appena usato il mathy-way per chiarire come posizionarlo manualmente a mano. Con questo esempio chiunque potrebbe capire come allinearlo a sinistra / centro / destra. Ad ogni modo, aggiungerò il auto- semplificatore :)
— yckart
15

Ecco un'altra soluzione che si basa su linear-gradientdove puoi facilmente creare qualsiasi tipo di linea desideri. Puoi anche avere più linee (su ciascun lato per esempio) utilizzando più sfondi:

Mostra snippet di codice

Ecco un'altra sintassi per ottenere lo stesso come sopra:

.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>
Espandi lo snippet

— Temani Afif
fonte
1
Wow ... ho giocherellato per ore per trovare un modo per mostrare solo l'angolo superiore sinistro e superiore destro di un riquadro "implicito". : prima e: dopo era troppo limitato, ha incasinato il posizionamento dell'oggetto. Questa è una soluzione brillante!
— Wouter
Alcune informazioni di base sul perché e come funziona: webfx.com/blog/web-design/background-css-shorthand
— Wouter
2

Ho usato una griglia per costruire disegnare alcuni dei bordi.

Vedi qui .

Codice:

<!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>
— siti
fonte
@ SverriM.Olsen poiché la persona ha modificato il codice, il commento è obsoleto
— Sagar V
0

CSS non supporta i bordi parziali. Dovresti usare un elemento adiacente per simulare questo.

— Diodeus - James MacFarlane
fonte
O uno pseudo-elemento, che puoi fare interamente con CSS e non aggiungere alcun markup, come illustrato dalle risposte sopra
— OG Sean
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.