Bir resim kullanarak daha yukarı div oluşturmak için kolay yolu?

SORU

30 Ocak 2011, Pazar

Bir resim kullanarak daha yukarı div oluşturmak için kolay yolu?

Şimdi ne yaptığımı daha dairesel divs oluşturmak için daha kolay bir yolu varsa merak ediyorum.

Şu anda, sadece her farklı boyut için resim yapıyorum, ama can sıkıcı bu.

Neyse CSS kullanarak yuvarlak ve yarıçapı belirtin bende divs olun.

CEVAP

30 Ocak 2011, Pazar

Burada bir demo: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Bu iş IE8 and older, sizin için indirmek ve kullanmak gerekir CSS3 PIE. Demomu yukarıda IE8, ama bu sadece jsFiddle PIE.htc ana yaramazsa, çünkü bu işe yaramaz.

Demomu bu gibi görünüyor: