Chrome'da saydam yuvarlak kenarlık

Bir div'in yuvarlak kenarlığını saydamlaştırmalıyım. Bu kodChrome'da saydam yuvarlak kenarlık

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
    <title>Test</title> 
    <style> 

    body 
    { 
     background-color: green; 
    } 

    #demobtn 
    { 
     height: 10%; 
     width: 18%; 
     left: 50%; 
     top: 50%; 
     border: solid; 
     border-width: 4px; 
     border-color: rgba(0, 0, 0, 0.5); 
     -webkit-border-radius: 18%/50%; 
     border-radius: 18%/50%; 
     background-color: white; 
     -webkit-background-clip: content; 
     background-clip: content-box; 
     margin: 0.25%; 
     padding: 0%; 
     position: relative; 
    } 

    </style> 
</head> 
<body> 
    <div id="demoBtn"></div> 
</body>

Chrome doğru bir şekilde köşesinde şeffaflığı yönetmek değil iken Firefox'ta mükemmel çalışıyor olduğunu.

enter image description here

Bu sorunu nasıl çözebilir: Bu sonuç nedir?

kaynak

2012-10-30 brian

Hrmn. Tam emin değilim. Ama belki de aynı şeyi taklit eden bir çift div yapabilirsin.

# HTML 
<div id="lightbox-border"> 
    <div id="lightbox"> 
     Content here. 
    </div> 
</div> 

# CSS 
body { 
    margin:50px; 
    background-color:green; 
} 

#lightbox-border { 
    background: rgba(0, 0, 0, 0.3); 
    padding: 20px; /* This is somewhat the border */ 
    border-radius: 15px; 
} 

#lightbox { 
    background-color: white; 

    border-radius: 10px; 
    padding: 15px; 
}

Burada bir keman http://jsfiddle.net/index/2K5GK/

yaptık

kaynak

2012-10-30 14:00:11 index

Chrome'da saydam yuvarlak kenarlık

cevap

İlgili konular