Jak ten CSS tworzy okrąg?
To jest CSS:
div {
width: 0;
height: 0;
border: 180px solid red;
border-radius: 180px;
}
Jak powstaje koło poniżej?
Załóżmy, że szerokość prostokąta wynosi 180 pikseli, a wysokość 180 pikseli, to wygląda tak:
Po zastosowaniu border-radius 30 pikseli wyglądałoby to tak:
Prostokąt staje się mniejszy, to znaczy prawie zniknie, jeśli rozmiar promienia wzrośnie.
Czyli jak obramować 180 pikseli z height/width-> 0px
stać się okręgiem o promieniu 180 pikseli?
5 answers
Przeformułujmy to na dwa pytania:]}Jak obramowanie 180 pikseli z wysokością / szerokością - > 0px staje się okręgiem o promieniu 180 pikseli?
Gdzie width
i height
rzeczywiście się ubiegać?
Spójrzmy na obszary typowego pudełka (Źródło):
height
i width
stosuje się tylko do zawartości, Jeśli używany jest poprawny Model pudełkowy (bez trybu dziwactwa, bez starego Internet Explorera).
Gdzie czy border-radius
ma zastosowanie?
border-radius
stosuje się na krawędzi obramowania. Jeśli nie ma wypełnienia ani obramowania, wpłynie to bezpośrednio na krawędź zawartości, co skutkuje trzecim przykładem.
Co to oznacza dla naszej granicy-promień / okrąg?
Oznacza to, że reguły CSS tworzą pole, które składa się tylko z obramowania. Twoje zasady mówią, że ta ramka powinna mieć maksymalną szerokość 180 pikseli po każdej stronie, podczas gdy z drugiej strony powinna mieć maksymalny promień ten sam rozmiar:
Na zdjęciu, rzeczywista treść twojego elementu (mała czarna kropka) naprawdę nie istnieje. Jeśli nie zastosujesz żadnego border-radius
, skończysz z Zielonym pudełkiem. border-radius
daje Ci niebieskie kółko.
Staje się łatwiejsze do zrozumienia, jeśli zastosujesz border-radius
tylko do dwóch narożników :
#silly-circle{
width:0; height:0;
border: 180px solid red;
border-top-left-radius: 180px;
border-top-right-radius: 180px;
}
Ponieważ w twoim przykładzie rozmiar i promień dla wszystkich narożników / obramowań są równe, otrzymujesz koło.
Dalsze zasoby
Referencje
- W3C: moduł CSS tła i obramowania Poziom 3 (esp. 5. Zaokrąglone Rogi )
Demonstracje
- otwórz poniższą wersję demonstracyjną, która pokazuje, jak
border-radius
wpływa na obramowanie (pomyśl o wewnętrznym niebieskim polu jako polu zawartości, wewnętrznej czarnej obramowaniu jako obramowaniu wypełnienia, pustej przestrzeni jako obramowaniu i olbrzymiej czerwonej obramowaniu jako, no, obramowaniu). Przecięcia między wewnętrznym pudełkiem a czerwoną obwódką zwykle wpływa na krawędź zawartości.
var all = $('#TopLeft, #TopRight, #BottomRight, #BottomLeft');
all.on('change keyup', function() {
$('#box').css('border' + this.id + 'Radius', (this.value || 0) + "%");
$('#' + this.id + 'Text').val(this.value + "%");
});
$('#total').on('change keyup', function() {
$('#box').css('borderRadius', (this.value || 0) + "%");
$('#' + this.id + 'Text').val(this.value + "%");
all.val(this.value);
all.each(function(){$('#' + this.id + 'Text').val(this.value + "%");})
});
#box {
margin:auto;
width: 32px;
height: 32px;
border: 100px solid red;
padding: 32px;
transition: border-radius 1s ease;
-moz-transition: border-radius 1s ease;
-webkit-transition: border-radius 1s ease;
-o-transition: border-radius 1s ease;
-ms-transition: border-radius 1s ease;
}
#chooser{margin:auto;}
#innerBox {
width: 100%;
height: 100%;
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div id="innerBox"></div>
</div>
<table id="chooser">
<tr>
<td><label for="total">Total</label></td>
<td><input id="total" value="0" type="range" min="0" max="100" step="1" /></td>
<td><input readonly id="totalText" value="0" type="text" /></td>
</tr>
<tr>
<td><label for="TopLeft">Top-Left</label></td>
<td><input id="TopLeft" value="0" type="range" min="0" max="100" step="1" /></td>
<td><input readonly id="TopLeftText" value="0" type="text" /></td>
</tr>
<tr>
<td><label for="TopRight">Top right</label></td>
<td><input id="TopRight" value="0" type="range" min="0" max="100" step="1" /></td>
<td><input readonly id="TopRightText" value="0" type="text" /></td>
</tr>
<tr>
<td><label for="BottomRight">Bottom right</label></td>
<td><input id="BottomRight" value="0" type="range" min="0" max="100" step="1" /></td>
<td><input readonly id="BottomRightText" value="0" type="text" /></td>
</tr>
<tr>
<td><label for="BottomLeft">Bottom left</label></td>
<td><input id="BottomLeft" value="0" type="range" min="0" max="100" step="1" /></td>
<td><input readonly id="BottomLeftText" value="0" type="text" /></td>
</tr>
<caption><code>border-radius</code> values. All values are in percent.</caption>
</table>
<p>This demo uses a box with a <code>width/height</code> of 32px, a <code>padding</code> of 32px, and a <code>border</code> of 100px.</p>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-24 07:25:38
Zbadajmy pytanie w inny sposób z tym obrazem demonstracji:
Zobaczmy najpierw, jak powstaje promień graniczny?
Aby uzyskać promień, zajmuje dwie strony swojej granicy. Jeśli ustawisz border-radius na 50 pikseli, to zajmie to 25 pikseli z jednej strony i 25 pikseli z drugiej strony.
I biorąc po 25 pikseli z każdej strony to będzie produkować tak:
div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 0 50px 0 0;
}
Teraz zobacz ile może weź maksimum kwadratu, aby zastosować na jednym rogu?
Może przyjmować do 180 pikseli od góry i 180 pikseli od prawej. Wtedy będzie to produkować tak:div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 0 180px 0 0;
}
I zobaczcie jak powstaje, jeśli ustawimy nie równą wartość promienia?
Załóżmy, że zastosujemy promień obramowania tylko do dwóch narożników nierównomiernie:
-
Prawy górny róg do 180 pikseli
-
W prawym dolnym rogu do 100 pikseli
Wtedy take
-
Top-right: 90 pikseli od góry i 90 pikseli od prawej
-
Bottom-right: 50 pikseli z prawej i 50 pikseli z dołu
Wtedy będzie to produkować tak
div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 0 180px 100px 0;
}
Ile maksimum jego granicy może zająć kwadrat, aby zastosować ze wszystkich stron? I zobacz, jak tworzy krąg?
Może zająć do połowy rozmiaru obramowania, czyli 180 pikseli / 2 = 90 pikseli. Wtedy by twórz okrąg taki jak ten
div{
width: 0px;
height: 0px;
border: 180px solid red;
border-radius: 180px;
}
Dlaczego nakładanie ze wszystkich stron zajmuje tylko połowę kwadratu?
Ponieważ wszystkie rogi muszą ustawić równą wartość promienia.
Biorąc równe części swojej granicy, tworzy okrąg.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-28 22:57:38
Obramowania są zewnętrznym pudełkiem dowolnej zawartości i jeśli zastosujesz promień na nim, to po prostu wytworzy okrągłą krawędź.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-28 22:58:20
Myślę, że początkowo tworzy prostokąt z height and width = 180px
, a następnie tworzy krzywą o podanym promieniu jak 30px
z każdym narożnikiem.
Więc Ustawia {[2] } z podanym radius
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-22 09:04:36
ZARÓWNO .a
jak i .b
dadzą identyczne wyniki.
P. dlaczego użyłem width: 360px; height: 360px;
?
A. border: 180px solid red;
w .a
działa jak border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */
.
Nadzieja to skrzypce pomaga zrozumieć tę koncepcję.
.a{
width: 0;
height: 0;
border: 180px solid red;
border-radius: 180px;
}
.b{
background:red;
width: 360px;
height: 360px;
border-radius: 180px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-24 10:21:02