gpt4 book ai didi

google-chrome - Chrome 中的透明圆形边框

转载 作者:行者123 更新时间:2023-12-03 17:54:44 26 4
gpt4 key购买 nike

我必须使 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

我怎么能解决这个问题?

最佳答案

嗯。我不太确定。但是你也许可以做一个模仿同样事情的双 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;
}


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

关于google-chrome - Chrome 中的透明圆形边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13139827/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com