Chromeの透明な丸い枠

divの丸い枠線を透明にする必要があります。これは、Chromeが正しい方法でコーナーに透明性を管理していませんがそれは、Firefoxで完璧に動作するコード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>

です。これが結果です：

enter image description here

どのように私はこの問題を解決するだろうか？

出典

2012-10-30 brian

Hrmn。私はあまりよく分からない。しかし、同じことを模倣するdouble divを行うこともできます。私はここにフィドルhttp://jsfiddle.net/index/2K5GK/

を作った

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

出典

2012-10-30 14:00:11 index

答えて

関連する問題