Jakiś sposób na zadeklarowanie rozmiaru / częściowego obramowania do pudełka w CSS? Na przykład pole z 350px
tym pokazuje tylko dolną krawędź na początku 60px
. Myślę, że to może być bardzo przydatne.
Przykłady:
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>
::outside
i::inside
pseudoelementy nie są jeszcze dostępne, nienawidzę umieszczać znaczników tylko do stylizacji, ale nie sądzę, że jest inny sposób.content
w:after
stylu inline lub JSS, ale działa dobrze, używając stylowanych komponentów.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:table
lubdisplay:inline-block
(Po prostu nie używam,
display:inline-block
ponieważ tak, wiesz, niezręczna4px
luka).Elementy tekstowe
Centrowanie ,
display:table
uniemożliwia wyśrodkować element ztext-align:center
.Popracujmy z
margin:auto
...Cóż , to miłe, ale nie częściowo .
Jak już wprowadziliśmy biblioteczkę , pseudoelementy są warte złota.
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.... jak zauważył davidmatas , używanie
margin:auto
jest czasami bardziej praktyczne niżmargin
rę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:margin-right: auto
(lub po prostu zostaw to wyłączone)margin: auto
margin-left: auto
Pełny przykład
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%
):źródło
:after
lubię bardziejmargin: 0 auto
podejścia zamiastmargin-left: 25%
ponieważ będzie ona działać z każdą szerokością deklarowania bez konieczności zrobić matematyki.auto
- uproszczenie :)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:Pokaż fragment kodu
Oto inna składnia, aby osiągnąć to samo, co powyżej:
źródło
Użyłem siatki, aby zbudować, narysować niektóre granice.
Zobacz tutaj .
Kod:
źródło
CSS nie obsługuje częściowych granic. Aby to zasymulować, musisz użyć sąsiedniego elementu.
źródło