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    

Szegély kerekítése ellipszissel



Már a százalékos értékadás esetén is, ha az elem magassága vagy szélessége különbözött, akkor két különböző sugár által meghatározott ellipszisek alkották a sarkokat.

Használhatunk az elem sarkainál negyed ellipsziseket abban az esetben is, ha oldalai egyenlőek.

Bármely sarok lekerekítésénél megadható a vízszintes és a függőleges sugár értéke (ebben a sorrendben.)

A bal felső sarok sugarainak beállítása:

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


A jobb felső sarok sugarainak beállítása:

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


A jobb alsó sarok sugarainak beállítása:

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


A bal alsó sarok sugarainak beállítása:

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


Használható abszolút, relatív és százalékos értékmegadás.

Példa:

Forráskód



<style>
      div   { border:1px solid green;
              width: 100px; height: 100px; 
              padding: 5px;}
      #id_0 {border-top-left-radius: 56px 30px;
              border-top-right-radius: 56px 30px;
              border-bottom-right-radius: 56px 30px;
              border-bottom-left-radius: 56px 30px;
             }            
      #id_1 {border-top-left-radius: 30px 56px;
              border-top-right-radius: 30px 56px;
              border-bottom-right-radius: 30px 56px;
              border-bottom-left-radius: 30px 56px;
             }   
      #id_2 {border-top-left-radius: 30px 10px;
              border-top-right-radius: 30px 10px;
              border-bottom-right-radius: 30px 10px;
              border-bottom-left-radius: 30px 10px;
             } 
      #id_3 {border-top-left-radius: 50% 15%;
              border-top-right-radius: 50% 15%;
              border-bottom-right-radius: 50% 15%;
              border-bottom-left-radius: 50% 15%;
             }        	     
</style>     
...
<body>    
     <div id="id_0">56px 30px;</div>           
     <div id="id_1">30px 56px;</div>
     <div id="id_2">30px 10px;</div>  
     <div id="id_3">50% 15%;</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_elipszis.html