CSS border-radius 属性

Paglalarawan at Paggamit

Ang katangian ng border-radius ay isang shortcut na katangian na ginagamit upang set ang apat na border-*-radius katangian.

Tipan:Ang katangian na ito ay nagbibigay sa iyo ng kapangyarihan na magdagdag ng rounding na border sa elemento.

Tingnan din:

Tuturo sa CSS3:CSS3 边框

Halimbawa

Magdagdag ng rounding na border sa elemento ng div:

div
{
border:2px solid;
border-radius:25px;
}

Subukan nang personal

Mayroon pang mas maraming halimbawa sa ibaba ng pahina.

语法 sa CSS

border-radius: 1-4 length|% / 1-4 length|%;

Komentaryo:I-set ang apat na halaga ng bawat radii sa kasunod na order. Kung tinanggal ang bottom-left, magiging katumbas ito ng top-right. Kung tinanggal ang bottom-right, magiging katumbas ito ng top-left. Kung tinanggal ang top-right, magiging katumbas ito ng top-left.

Halaga ng katangian

Halaga Paglalarawan Test
length Tukuyin ang hugis ng rounding. Test
% Tukuyin ang hugis ng rounding sa pamamagitan ng porsyento. Test

Mga halimbawa 1

border-radius:2em;

Katumbas ng:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Mga halimbawa 2

border-radius: 2em 1em 4em / 0.5em 3em;

Katumbas ng:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Detalye ng teknolohiya

Default na halaga: 0
Inheriksyon: hindi
Bersiyon: CSS3
语法 sa JavaScript: object.style.borderRadius="5px"

Suporta ng browser

Ang numero sa talahanayan ay nagtutukoy sa unang bersiyong pinagsuportahan ng browser ang katangian na iyon.

Chrome IE / Edge Firefox Safari Opera
5.0
4.0 -webkit-		 9.0 4.0
3.0 -moz-		 5.0
3.1 -webkit-		 10.5