CSS pyöristetyt kulmat

CSS pyöristetyt kulmat

CSS:n kautta border-radius Ominaisuus, joka voi toteuttaa minkä tahansa elementin 'pyöreä kulma' tyylin.

CSS border-radius ominaisuus

CSS border-radius Ominaisuus määrittää elementin kulmien säteet.

Vinkki：Voit käyttää tätä ominaisuutta lisätäksesi pyöristetyt kulmat elementtiin!

Tässä on kolme esimerkkiä:

1. Pyöristetyt kulmat elementillä, jolla on määritelty taustaväri:

Pyöristetyt kulmat！

2. Pyöristetyt kulmat elementillä, jolla on reunaviiva:

Pyöristetyt kulmat！

3. Pyöristetyt kulmat elementillä, jolla on taustakuva:

Pyöristetyt kulmat！

Tämä on koodi:

Esimerkki

#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; 
}

Kokeile itse!

Vinkki：border-radius Ominaisuus on itse asiassa seuraavien ominaisuuksien lyhennetty muoto：

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

CSS border-radius - määrittää jokaisen kulman

border-radius Ominaisuus voi hyväksyä yhden tai neljä arvoa. Säännöt ovat seuraavat：

Neljä arvoa - border-radius: 15px 50px 30px 5px;（Käytetään seuraavasti：vasen yläkulma，oikea yläkulma，oikea alakulma，vasen alakulma）：

Kolme arvoa - border-radius: 15px 50px 30px;（Ensimmäinen arvo käytetäänvasemmalla yläkulmalla，toinen arvo käytetään oikealla yläkulmalla ja vasemmalla alakulmalla，kolmas arvo käytetään oikealla alakulmalla）：

Kaksi arvoa - border-radius: 15px 50px;（Ensimmäinen arvo käytetäänvasemmalla yläkulmalla ja oikealla alakulmalla，toinen arvo käytetään oikealla yläkulmalla ja vasemmalla alakulmalla）：

Yksi arvo - border-radius: 15px;（Tämä arvo käytetään kaikkiin neljään kulmaan, pyöristykset ovat samat）：

Tämä on koodi:

Esimerkki

#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; 
}

Kokeile itse!

Voit myös luoda elliptisiä kulmia:

Esimerkki

#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;
}

Kokeile itse!

CSS pyöristetyt kulmat ominaisuus

Ominaisuus Kuvaus
border-radius Käytetään kaikkien neljän border-*-*-radius-ominaisuuksien lyhennettyä ominaisuutta.
border-top-left-radius Määrittää vasemman yläreunan muodon.
border-top-right-radius Määrittää oikean yläreunan muodon.
border-bottom-right-radius Määrittää oikean alan reunan muodon.
border-bottom-left-radius Määrittää vasemman alan reunan muodon.