Chrome中的透明圆形边框

Question

Chrome中的透明圆形边框

bri*_*ian 5 google-chrome border transparent

我必须透明div的圆形边框.这是代码

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

Run Code Online (Sandbox Code Playgroud)

它在Firefox中完美运行,而Chrome无法以正确的方式管理角落的透明度.这是结果:

在此输入图像描述

我怎么能解决这个问题？

Answer 1

ind*_*dex 0

嗯。我不太确定。但你也许可以做一个双 div 来模仿同样的事情。

\n\n

# HTML\n<div id="lightbox-border">\n    <div id="lightbox">\n        Content here.\n    </div>\n</div>\xe2\x80\x8b\n\n# CSS\nbody {\n    margin:50px;\n    background-color:green;\n}\n\n#lightbox-border {\n    background: rgba(0, 0, 0, 0.3);\n    padding: 20px; /* This is somewhat the border */\n    border-radius: 15px;\n}\n\n#lightbox {\n    background-color: white;\n\n    border-radius: 10px;\n    padding: 15px;\n}\n\xe2\x80\x8b\n

Run Code Online (Sandbox Code Playgroud)\n\n

我在这里做了一个小提琴http://jsfiddle.net/index/2K5GK/

\n

归档时间：	13 年，1 月前
查看次数：	570 次
最近记录：	13 年，1 月前