Eienskap border-radius

Die eienskap border-radius skep afgeronde hoeke vir die rand en agtergrond. Die waarde van die eienskap is enige eenhede vir groottes. Verstekwaarde: 0. Is 'n afkorting vir die eienskappe border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Sintaksis

selektor {
	border-radius: waarde;
}

Aantal waardes

Die eienskap kan 1, 2, 3 of 4 waardes aanvaar, gespesifiseer met 'n spasie tussen:

Aantal	Beskrywing
`1`	Vir alle hoeke gelyktydig.
`2`	Eerste waarde spesifiseer afronding vir die boonste regter en onderste linker hoeke, tweede - vir die boonste linker en onderste regter.
`3`	Eerste waarde spesifiseer afronding vir die boonste linker hoek, tweede - gelyktydig vir die boonste regter en onderste linker, en derde - vir die onderste regter hoek.
`4`	Eerste waarde spesifiseer afronding vir die boonste linker hoek, tweede - vir die boonste regter, derde - vir die onderste regter hoek, en vierde - vir die onderste linker hoek.

Elliptiese afronding

Twee waardes met 'n skuinsstreep stel elliptiese afronding in. Die waarde voor die skuinsstreep spesifiseer horisontale afronding, en die waardes na die skuinsstreep - vertikale:

selektor {
	border-style: horisontaal / vertikaal;
}

As afrondings vir verskeie hoeke gespesifiseer word, word alle horisontale afrondings voor die skuinsstreep gelys, en daarna - alle vertikale.

Voorbeeld

Laat ons 'n afronding van 10px vir alle hoeke stel:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Voorbeeld

Kom ons kyk hoe afrondings vir 'n rand in die vorm van kolletjies lyk:

<div id="elem"></div>

#elem {
	border-radius: 10px;
	border: 1px dotted black;
	width: 300px;
	height: 100px;
}

Voorbeeld

Laat ons 'n afronding van 10px vir hoeke van een hoeklyn stel, en afrondings van 40px - vir hoeke van die tweede hoeklyn:

<div id="elem"></div>

#elem {
	border-radius: 10px 40px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Voorbeeld

Laat ons 'n afronding van 10px vir die boonste linker hoek stel, 'n afronding van 30px vir die onderste regter hoek, en afrondings van 50px - vir hoeke van die tweede hoeklyn:

<div id="elem"></div>

#elem {
	border-radius: 10px 50px 30px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Voorbeeld

Laat ons verskillende afrondings vir elk van die hoeke stel:

<div id="elem"></div>

#elem {
	border-radius: 10px 30px 50px 70px;
	border: 1px solid black;
	width: 300px;
	height: 100px;
}

Voorbeeld

Kom ons maak 'n elliptiese afronding, en stel 20px vir die horisontale deel van die afronding, en 40px - vir die vertikale:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px / 40px;
	width: 300px;
	height: 100px;
}

Voorbeeld

En nou stel ons verskillende elliptiese afronding vir al die hoeke afsonderlik:

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px;
	width: 300px;
	height: 100px;
}

Voorbeeld

As jy vir 'n vierkantige blok 'n afronding stel, gelykstaande aan die helfte van die sy van die vierkant, kry jy 'n sirkel:

<div id="elem"></div>

#elem {
	border-radius: 100px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Voorbeeld

As jy 'n afronding stel, groter as die sy van die vierkant, kry jy steeds 'n sirkel:

<div id="elem"></div>

#elem {
	border-radius: 200px;
	border: 1px solid black;
	width: 200px;
	height: 200px;
}

Voorbeeld

Jy kan ook 'n sirkel kry as jy border-radius instel op 50% (voordeel daarin dat jy nie die afronding hoef te verander nie wanneer die grootte van die vierkant verander ):

<div id="elem"></div>

#elem {
	border: 1px solid black;
	border-radius: 50%;
	width: 200px;
	height: 200px;
}

Voorbeeld

As jy border-radius in persentasies vir 'n reghoek instel, kry jy 'n elliptiese afronding. As die breedte gespesifiseer is as 400px, hoogte as 200px, en border-radius as 10%, dan is dit dieselfde asof daar geskryf is 40px/20px:

<div id="elem"></div>

#elem {
	border-radius: 10%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Voorbeeld

Laat ons die waarde border-radius instel op 50% vir 'n reghoek - ons kry 'n ellips:

<div id="elem"></div>

#elem {
	border-radius: 50%;
	border: 1px solid black;
	width: 400px;
	height: 200px;
}

Voorbeeld

Die eienskap border-radius rond nie net die hoekies van die rand af nie, maar ook die agtergrond:

<div id="elem"></div>

#elem {
	border-radius: 20px;
	width: 300px;
	height: 100px;
	background-color: #e4f1ed;
}

Sien ook

die eienskap border,
wat 'n afkorting-eienskap is vir die rand