Question

我必须透明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>

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

enter image description here

我怎么能解决这个问题？

Answer 1

-RMN。我不太确定。但你可以做一个模仿同样事情的双重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/

Chrome中的透明圆形边框

1 个答案: