CSS-kaarevyys

CSS-kaarevyys

CSS:n kautta border-radius Ominaisuus, joka voi toteuttaa minkä tahansa elementin 'reunakulma' 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 määritellyllä taustavärillä varustetuissa elementissä：

Pyöristetyt kulmat！

2. Pyöristetyt kulmat reunalla varustetuissa elementissä：

Pyöristetyt kulmat！

3. Pyöristetyt kulmat taustakuvalla varustetuissa elementissä：

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:n 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;（Vaiheittain käytetään：vasemman yläkulma，oikean yläkulma，oikean alakulma，vasemman alakulma）：

Kolme arvoa - border-radius: 15px 50px 30px;（Ensimmäinen arvo käytetään vasemman yläkulmaan，toinen arvo käytetään oikean yläkulmaan ja vasemman alakulmaan，kolmas arvo käytetään oikean alakulmaan）：

Kaksi arvoa - border-radius: 15px 50px;（Ensimmäinen arvo käytetään vasemman yläkulmaan ja oikean alakulmaan，toinen arvo käytetään oikean yläkulmaan ja vasemman alakulmaan）：

Yksi arvo - border-radius: 15px;（Arvo käytetään kaikkiin neljään kulmaan, kulmien pyöristys on sama）：

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:n kulmien pyöristämisominaisuus

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