logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

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


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.