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>

크롬이 올바른 방법으로 코너에 투명성을 관리하지 않는 동안은 파이어 폭스에서 완벽하게 작동을합니다.

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의 투명한 둥근 테두리

답변

관련 문제