gpt4 book ai didi

html - 如何在 div 内设置带有内部边框的 div 样式?

转载 作者:太空宇宙 更新时间:2023-11-03 20:30:38 26 4
gpt4 key购买 nike

如何定位内边框,使其看起来像这样。

enter image description here

我的内部边框 div 包含边框样式:虚线;

.container {
max-width: 980px;
height: auto;
margin: 0 auto;
width: 100%;
}

.border {
background: white;
border-radius: 50%;
height: 300px;
}

.innerborder {
border-style: dashed;
height: 200px;
border-radius: 50%;
}
<body style="background: black;">
<div class="container">
<div class="border">
<div class="innerborder">
</div>
</div>
</div>
</body>

我尝试的 css 似乎没有产生与图片相关的输出。有没有其他方法可以使用 css 实现此目的?请帮忙。

最佳答案

我会建议你使用伪选择器 :before 并在 .container 中创建 dashed border,如下所示,

body{
background:#111;
}
.container{
width:400px;
height:400px;
border-radius:50%;
background:#fff;
margin:auto;
position:relative;
}
.container:before{
content:"";
width:380px;
height:380px;
position:absolute;
border:1px dashed #111;
border-radius:50%;
top:9px;
left:9px;
}
<div class="container">
</div>

即使你的代码工作正常,只需添加 padding to .border 并减少 .inner-border 的高度,我已经将 .container 的高度更改为 400px 以获得它进入适当的圆圈。

.container {
height: 400px;
margin: 0 auto;
width: 400px;
}

.border {
background: white;
border-radius: 50%;
height: 365px;
width:380px;
padding:10px;
}

.innerborder {
border-style: dashed;
height: 360px;
border-radius: 50%;
}
<body style="background: black;">
<div class="container">
<div class="border">
<div class="innerborder">
</div>
</div>
</div>

关于html - 如何在 div 内设置带有内部边框的 div 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42826438/

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