gpt4 book ai didi

css - 如何合并两个div

转载 作者:行者123 更新时间:2023-12-03 21:39:16 25 4
gpt4 key购买 nike

我有两个 div,它们应该看起来像一个数字。问题在于圆形块的边界。见图。以下。下面添加了 css

input and output needed

#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}

#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}

最佳答案

也许尝试这样的事情:http://jsfiddle.net/VNAZA/
使用两个 div:一个只有边框,在矩形下分层,另一个有实际内容,在矩形上分层。通过这种方式,您还可以将 css box-shadow 应用于较低的 div。

.container{
position:relative;
width: 50px;
height: 150px;
}

.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}

.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
    <div class="container"> 
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>

关于css - 如何合并两个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11190488/

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