Jakiś sposób na zadeklarowanie rozmiaru / częściowego obramowania pudełka?

104

Jakiś sposób na zadeklarowanie rozmiaru / częściowego obramowania do pudełka w CSS? Na przykład pole z 350pxtym pokazuje tylko dolną krawędź na początku 60px. Myślę, że to może być bardzo przydatne.

Przykłady:

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj

davidmatas
źródło

Odpowiedzi:

154

Nie całkiem. Ale bardzo łatwo jest osiągnąć efekt w sposób, który z wdziękiem degraduje się i nie wymaga zbędnych znaczników:

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>

regał
źródło
3
Nie ma to jak oznaczenie prawidłowej odpowiedzi bez +1. Ale ja dałem ci +1! To było idealne rozwiązanie mojego problemu. Dzięki! edytuj Wydaje mi się, że mogłeś dostać +1, oznaczałoby to OP, a +1 przez kogoś innego. No cóż. Doceniam twoją odpowiedź i tylko to się
liczy
7
Jak sprawić, by to było w centrum, jak w jego drugim przykładzie?
Cameron Martin,
Powinienem dodać, gdy element nadrzędny jest elementem blokowym o szerokości płynnej. Oczywiście, gdy ma stałą szerokość, jest to łatwe.
Cameron Martin,
4
Nieważne, uzyskałem pożądany efekt - dabblet.com/gist/e5a78f2d4bf50b6be4d3 . Szkoda, że ::outsidei ::insidepseudoelementy nie są jeszcze dostępne, nienawidzę umieszczać znaczników tylko do stylizacji, ale nie sądzę, że jest inny sposób.
Cameron Martin,
To działa! Aby używać go z Reactem, nie możesz używać go contentw :afterstylu inline lub JSS, ale działa dobrze, używając stylowanych komponentów.
Raphael Pinel
23

Wiem, że jest to już rozwiązane i zażądano pikseli. Jednak chciałem się tylko czymś podzielić ...

Częściowo podkreślone elementy tekstu można łatwo osiągnąć za pomocą display:tablelubdisplay:inline-block

(Po prostu nie używam, display:inline-blockponieważ tak, wiesz, niezręczna 4pxluka).

Elementy tekstowe

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

Centrowanie , display:tableuniemożliwia wyśrodkować element z text-align:center.
Popracujmy z margin:auto...

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

Cóż , to miłe, ale nie częściowo .
Jak już wprowadziliśmy biblioteczkę , pseudoelementy są warte złota.

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>

Odsunięcie , podkreślenie jest teraz wyrównane do lewej. Aby go wyśrodkować, po prostu przesuń pseudoelement do połowy jego width( 50% / 2 = 25%) w prawo.

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>

... jak zauważył davidmatas , używanie margin:autojest czasami bardziej praktyczne niż marginręczne obliczanie przesunięcia.

Możemy więc wyrównać podkreślenie do lewej, prawej lub do środka (bez znajomości bieżącego width), używając jednej z tych kombinacji:

  • Po lewej : margin-right: auto (lub po prostu zostaw to wyłączone)
  • Środek :margin: auto
  • Po prawej :margin-left: auto

Pełny przykład

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

Elementy na poziomie bloku

Można to łatwo zaadoptować, abyśmy mogli używać elementów blokowych. Sztuczka polega na ustawieniu wysokości pseudoelementów na taką samą wysokość jak jego rzeczywisty element (po prostu 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>

yckart
źródło
2
Świetna odpowiedź. Dla :afterlubię bardziej margin: 0 autopodejścia zamiast margin-left: 25%ponieważ będzie ona działać z każdą szerokością deklarowania bez konieczności zrobić matematyki.
davidmatas
1
@davidmatas Słuszna uwaga! Właśnie zastosowałem matematyczny sposób, aby wyjaśnić, jak ustawić go ręcznie. W tym przykładzie każdy może zrozumieć, jak wyrównać go do lewej / środka / prawej. Zresztą dodam auto- uproszczenie :)
yckart
16

Oto inne rozwiązanie, które polega na tym, linear-gradientże możesz łatwo stworzyć dowolną linię. Możesz również mieć wiele linii (na przykład po każdej stronie), używając wielu tła:

Oto inna składnia, aby osiągnąć to samo, co powyżej:

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

Temani Afif
źródło
1
Wow ... Godzinami bawiłem się, aby znaleźć sposób, aby wyświetlić tylko górny lewy i prawy górny róg „domniemanego” pola. : przed i: po było zbyt ograniczone, to zepsuło pozycjonowanie obiektu. To genialne rozwiązanie!
Wouter
Podstawowe
Wouter
2

Użyłem siatki, aby zbudować, narysować niektóre granice.

Zobacz tutaj .

Kod:

<!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>
witryn
źródło
@ SverriM.Olsen, ponieważ osoba dokonała edycji kodu, komentarz jest nieaktualny
Sagar V
0

CSS nie obsługuje częściowych granic. Aby to zasymulować, musisz użyć sąsiedniego elementu.

Diodeus - James MacFarlane
źródło
Lub pseudoelement, który możesz zrobić całkowicie za pomocą CSS i nie dodawać żadnych znaczników, jak ilustrują powyższe odpowiedzi
OG Sean