CSS Rounded Corner

CSS Rounded Corner

Sa pamamagitan ng CSS border-radius Atributo, maaaring gumana ang anumang elemento sa 'bendibendit' na estilo.

CSS border-radius Attribute

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

Mga payo:Maaari mong gamitin ang attribute upang magdagdag ng bulging sa elemento!

May tatlong halimbawa dito:

1. Bulging ng elemento na may tinukoy na background color:

Bulging!

2. Bulging ng elemento na may border:

Bulging!

3. Bulging ng elemento na may background image:

Bulging!

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

Mga payo:border-radius Ang attribute ay totoo ay isang maikling paraan 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 ng isang hanggang apat na halaga. Ang patakaran ay gayon:

Apat na halaga - border-radius: 15px 50px 30px 5px;（Mula sa susunod-susunod na ginagamit para sa: kanang itaas na sulok, itaas at baba na sulok, baba na sulok, kanang baba na sulok）：

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

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

Isang halaga - border-radius: 15px;（Ang halaga ay ginagamit para sa apat na sulok, ang bulging 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

Maaari mo ring gumawa ng parang lupon sa gilid:

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

CSS Bulging na attribute

Attribute Paglalarawan
border-radius Ginagamit para sa pagtatakda ng maikling paraan ng lahat ng apat na border-*-*-radius na 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.