Rounded Corner ng CSS

Rounded Corner ng CSS

Sa pamamagitan ng CSS border-radius Atributo, maaring magawang gumawa ng anyo ng 'round corner' para sa anumang elemento.

CSS border-radius Attribute

CSS border-radius Ang attribute ay nagtutukoy sa radious ng sulok ng elemento.

Paalala:Maaari kang gumamit ng attribute na ito upang magdagdag ng rounded corner sa elemento!

May tatlong halimbawa dito:

1. Mga rounded corner ng elemento na may tinukoy na kulay ng background:

Mga corner na may rounded!

2. Mga rounded corner ng elemento na may border:

Mga corner na may rounded!

3. Mga rounded corner ng elemento na may background image:

Mga corner na may rounded!

Ito ang code:

Halimbawa

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Subukan nang personal mo!

Paalala:border-radius Ang attribute ay tunay na isang kurtim ng sumusunod na attribute:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius - Tukuyin ang bawat sulok

border-radius Ang attribute ay maaaring tanggapin ang isang hanggang apat na halaga. Ang patakaran ay tulad ng:

Apat na halaga - border-radius: 15px 50px 30px 5px;（Dahil sa: kanlurang itaas, kanlurang itaas at kanlurang ibaba, kanlurang ibaba, kanlurang itaas）：

Tatlong halaga - border-radius: 15px 50px 30px;（Ang unang halaga ay ginagamit para sa kanlurang itaas, ang ikalawa ay para sa itaas na kanluran at ibaba na kanluran, ang ikatlo ay para sa kanlurang ibaba）：

Dalawang halaga - border-radius: 15px 50px;（Ang unang halaga ay ginagamit para sa kanlurang itaas at kanlurang ibaba, ang ikalawa ay para sa itaas na kanluran at ibaba na kanluran）：

Isang halaga - border-radius: 15px;（Ang halaga na ito ay ginagamit para sa apat na sulok, ang mga corner ay magkapareho）：

Ito ang code:

Halimbawa

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

Subukan nang personal mo!

Maaari ka ring gumawa ng hugis na parang elipso sa mga sulok:

Halimbawa

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}
#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px;
}

Subukan nang personal mo!

CSS Bounding Corner Attribute

Attribute Paglalarawan
border-radius Ginagamit upang itakda ang maaring lagay ng apat na border-*-*-radius na attribute sa isang kurtim ng attribute.
border-top-left-radius Define the shape of the top left border.
border-top-right-radius Define the shape of the top right border.
border-bottom-right-radius Define the shape of the bottom right border.
border-bottom-left-radius Define the shape of the bottom left border.