Chrome中的透明圓角邊框

我必須使div的圓角邊框透明。這是代碼Chrome中的透明圓角邊框

<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>

它完全在Firefox瀏覽器時不以正確的方式管理街角的透明度。這是結果：

enter image description here

我怎麼能解決這個問題？

來源

2012-10-30 brian

Hrmn。我不太確定。但你也許可以做一個模仿同樣事物的雙倍的div。

# 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; 
}

我做了這裏小提琴http://jsfiddle.net/index/2K5GK/

來源

2012-10-30 14:00:11 index

Chrome中的透明圓角邊框

回答

相關問題