Görünüşe göre 9 border-radius CSS3 standart tanımı kullanarak yuvarlak köşeleri işlemek için yapabiliyor.

Ne sınır radius desteği hakkındavearka plan degrade? Evet 9. onları yuvarlak köşede iki degrade kanamaları karıştırırsanız, ayrı ayrı, ama destek için.

Ayrıca gölgeler, yuvarlak köşeler ile bir kutu altına düz siyah bir çizgi olarak gösteren gariplik görüyorum.

Burada resim 9'de gösterilmiştir:

Bu soruna nasıl bir çözüm bulabilirim?

Ayrıca bu sorun ile uğraşıyorum. "Çözüm" degrade ve yuvarlatılmış köşeleri olan maddenin etrafında bir div ekleyin. başka bir Bu div yükseklik, genişlik ve yuvarlak köşe değerleri aynı. Gizli taşma ayarlayın. Bu temelde sadece bir maske, ama benim için çalışıyor.

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}