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.