5

我必须使 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 不能以正确的方式管理角落的透明度。这是结果：

在此处输入图像描述

我该如何解决这个问题？

4

1 回答 1

0

嗯。我不太确定。但是你也许可以做一个模仿同样事情的双 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-30T14:00:11.317 回答