Gibt es eine Möglichkeit, eine Größe / einen Teilrand für eine Box zu deklarieren?

101

Gibt es eine Möglichkeit, eine Größe / einen Teilrand für ein Feld in CSS zu deklarieren? Zum Beispiel zeigt ein Feld mit 350pxdiesem nur einen Rand unten in seinen ersten 60px. Ich denke, das könnte sehr nützlich sein.

Beispiele:

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

css  border 
— Davidmatas
quelle

Antworten:

151

Nicht wirklich. Es ist jedoch sehr einfach, den Effekt auf eine Weise zu erzielen, die sich elegant verschlechtert und kein überflüssiges Markup erfordert:

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>
Erweitern Sie das Snippet

— Bücherregal
quelle
3
Nichts geht über die richtige Antwort ohne +1. Aber ich habe dich! Dies war eine perfekte Lösung für mein Problem. Vielen Dank! edit Ich denke du hättest + 1 OP und -1 von jemand anderem sein können. Naja. Ich schätze deine Antwort und das ist alles was zählt, richtig ;-)
— CWSpear
7
Wie bringt man das in den Mittelpunkt, wie in seinem zweiten Beispiel?
— Cameron Martin
Ich sollte hinzufügen, wenn das übergeordnete Element ein Inline-Block-Element mit flüssiger Breite ist. Wenn es eine feste Breite hat, ist es natürlich einfach.
— Cameron Martin
4
Egal, ich habe den gewünschten Effekt erzielt - dabblet.com/gist/e5a78f2d4bf50b6be4d3 . Es ist eine Schande, dass die ::outsideund ::insidePseudo-Elemente noch nicht verfügbar sind. Ich hasse es, Markups nur für das Styling einzufügen, aber ich glaube nicht, dass es einen anderen Weg gibt.
— Cameron Martin
Das funktioniert! Um es zu nutzen mit Reaktion, können Sie nicht verwenden , contentin :afterwie Inline - Stil oder JSS, aber es funktioniert gut gestylt Komponenten.
— Raphael Pinel
23

Ich weiß, das ist bereits gelöst und Pixel wurden angefordert. Ich wollte jedoch nur etwas teilen ...

Teilweise unterstrichene Textelemente können leicht mit display:tableoder erreicht werdendisplay:inline-block

(Ich benutze es einfach nicht, display:inline-blockweil, ja, weißt du, die unangenehme 4pxLücke).

Textelemente

h1 {
  border-bottom: 1px solid #f00;
  display: table;
}
<h1>Foo is not equal to bar</h1>
Erweitern Sie das Snippet

Zentrieren , display:tablemacht es unmöglich , das Element zum Zentrum mit text-align:center.
Lass uns herumarbeiten mit margin:auto...

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

Nun , das ist schön, aber nicht teilweise .
Wie bereits im Bücherregal vorgestellt, sind Pseudoelemente Gold wert.

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>
Erweitern Sie das Snippet

Versetzt ist die Unterstreichung jetzt linksbündig ausgerichtet. Um es zu zentrieren, schieben Sie das Pseudoelement einfach um die Hälfte seines width( 50% / 2 = 25%) nach rechts.

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>
Erweitern Sie das Snippet

... wie Davidmatas kommentierte, ist die Verwendung margin:automanchmal praktischer als die Berechnung des marginOffsets von Hand.

So können wir die Unterstreichung nach links, rechts oder in der Mitte ausrichten (ohne den Strom zu kennen width), indem wir eine der folgenden Kombinationen verwenden:

  • Links : margin-right: auto (oder einfach weglassen)
  • Mitte :margin: auto
  • Richtig :margin-left: auto

Vollständiges Beispiel

.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>
Erweitern Sie das Snippet

Elemente auf Blockebene

Dies kann leicht übernommen werden, so dass wir Elemente auf Blockebene verwenden können. Der Trick besteht darin, die Höhe der Pseudoelemente (einfach ) auf die gleiche Höhe wie das eigentliche Element einzustellen 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>
Erweitern Sie das Snippet

— yckart
quelle
2
Gute Antwort. Für den :afterIch mag eher einen margin: 0 autoAnsatz als den, margin-left: 25%weil er mit jeder Breite funktioniert, die Sie deklarieren, ohne dass Sie rechnen müssen.
— Davidmatas
1
@ Davidmatas Guter Punkt! Ich habe gerade die mathematische Methode verwendet , um zu klären, wie man es manuell von Hand positioniert. Mit diesem Beispiel kann jeder verstehen, wie man es links / mittig / rechts ausrichtet. Wie auch immer, ich werde den auto- simplificator :)
— yckart
15

Hier ist eine weitere Lösung, die davon abhängt, linear-gradientwo Sie problemlos jede Art von Linie erstellen können, die Sie möchten. Sie können auch mehrere Zeilen (z. B. auf jeder Seite) verwenden, indem Sie mehrere Hintergründe verwenden:

Code-Snippet anzeigen

Hier ist eine andere Syntax, um dasselbe wie oben zu erreichen:

.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>
Erweitern Sie das Snippet

— Temani Afif
quelle
1
Wow ... Ich habe stundenlang herumgespielt, um einen Weg zu finden, nur die obere linke und obere rechte Ecke einer "implizierten" Box anzuzeigen. : vor und: nach war zu begrenzt, es hat die Positionierung des Objekts durcheinander gebracht. Dies ist eine brillante Lösung!
— Wouter
Einige Hintergrundinformationen darüber, warum und wie dies funktioniert: webfx.com/blog/web-design/background-css-shorthand
— Wouter
2

Ich habe ein Raster verwendet, um einige der Grenzen zu zeichnen.

Siehe hier .

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>
— Websites
quelle
@ SverriM.Olsen da die Person den Code bearbeitet hat, ist der Kommentar veraltet
— Sagar V
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.