gpt4 book ai didi

CSS 圆形 mask

转载 作者:行者123 更新时间:2023-11-28 09:12:47 25 4
gpt4 key购买 nike

我希望在包含在主圆圈中的圆圈底部创建一个深色蒙版。

你可以使用 css masks 来做到这一点吗?

请参阅fiddle

<div id="profile-pic-wrap">
<div id="profile-pic">
<div class="profile-btn-bg">
<a href="#" class="profile-pic-btn">Change Profile</a>
</div>
</div>
</div>

谢谢

最佳答案

你可以使用overflow:hidden; :

DEMO

更改您的 CSS :添加 overflow:hidden;text-align:center#profile-pic

#profile-pic {
position: absolute;
z-index: 999;
width: 200px;
height: 200px;
left: 33px;
background: #FFF;
border: 3px solid #FFF;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
top: 0px;
position: relative;
background:red;
overflow:hidden;
text-align:center;
}
.profile-btn-bg{
position: absolute;
background-color: black;
width: 100%;
height: 30%;
bottom: 0px;
}

a.profile-pic-btn{
color: #fff;

}
<div id="profile-pic-wrap">
<div id="profile-pic">
<div class="profile-btn-bg">
<a href="#" class="profile-pic-btn">Change Profile</a>
</div>
</div>
</div>

关于CSS 圆形 mask ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25992034/

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