2013-11-24 11 views
5

Mükemmel şekilde yuvarlatılmış köşeleri olan bir düğmem var; anlamı, düğme 50px yüksek olduğu ve sınır yarıçapı düğmesinin her iki tarafında mükemmel yarım daire yaparak, 25px geçerli: Zaten yüksekliğini bilmek sağlanan kolaydırDeğişken Yükseklik Elemanı Üzerindeki Mükemmel Dairesel Köşeleri Koruyun

enter image description here

CSS ile bu ulaşılması Buton (düğme yüksekliği ÷ 2 = sınır yarıçapı).

Ama düğmenin yüksekliği dinamik artarsa ​​mükemmel dairesel kenarları korumak mümkündür (daha fazla metin örneğin eklenir) ?:

enter image description here

cevap

5

gibi, yüksek border-radius bir şey ayarlamak 360px.

div { 
    height:50px; 
    width:500px; 
    background:red; 
    border-radius:360px; 
} 

Ne demek istediğimi görmek için this jsFiddle example'a bakın.