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:
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:
Odpowiedzi:
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>::outsidei ::insidepseudoelementy nie są jeszcze dostępne, nienawidzę umieszczać znaczników tylko do stylizacji, ale nie sądzę, że jest inny sposób.
contentw :afterstylu 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:tablelubdisplay:inline-block
(Po prostu nie używam, display:inline-blockponieważ tak, wiesz, niezręczna 4pxluka).
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:
margin-right: auto (lub po prostu zostaw to wyłączone)margin: automargin-left: autoPeł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>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>: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.
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:
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>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>CSS nie obsługuje częściowych granic. Aby to zasymulować, musisz użyć sąsiedniego elementu.