小编bri*_*ian的帖子

Chrome中的透明圆形边框

我必须透明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无法以正确的方式管理角落的透明度.这是结果:

在此输入图像描述