HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

A lekerekítés százalékos értékkel



Ha egy négyzet esetén a kerekítés sugarát százalékban adjuk meg, akkor a 100% megegyezik a négyzet egy oldalának hosszával. 50% beállítása esetén kör alakú lesz a szegély.

Téglalap esetén a sarkokon körcikk helyett negyed ellipszis lesz a kerekítés eredménye.

A függőleges sugár számításának alapja: height + 2*padding + 2*border-width

A vízszintes sugár számításának alapja: width + 2*padding + 2*border-width

50% beállítása esetén ellipszis alakú lesz a szegély.

A lekerekítés sugarának beállítása:

kijelölő
{
border-radius
:
érték%;
}


1. példa:

Forráskód



<style>
      div  { border:1px solid green;
             width: 100px; height: 100px; 
             padding: 5px;} 
      #id_0 {border-radius: 10%;}   
      #id_1 {border-radius: 40%;}  
      #id_2 {border-radius: 50%;}  
      #id_3 {border-radius: 60%;}   
</style>     
...
<body>    
     <div id="id_0">10%;</div>  
     <div id="id_1">40%;</div>
     <div id="id_2">50%;</div>  
     <div id="id_3">60%</div> 
</body>
 

Eredmény*

2. példa:

Forráskód



<style>
      div  { border:1px solid green;
             width: 200px; height: 100px; 
             padding: 5px;} 
      #id_0 {border-radius: 10%;}   
      #id_1 {border-radius: 40%;}  
      #id_2 {border-radius: 50%;}  
</style>     
...
<body>    
     <div id="id_0">10%;</div>  
     <div id="id_1">40%;</div>
     <div id="id_2">50%;</div>  
</body>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_kerekit_szazalek.html