gpt4 book ai didi

html - 我将如何在 CSS3 中制作这个边框?

转载 作者:太空宇宙 更新时间:2023-11-04 01:40:07 26 4
gpt4 key购买 nike

我将如何在 CSS3/HTML5 中制作它?

红色背景是div的背景。内部白色是另一个包含一些文本的 div。

Border

最佳答案

因为你已经有 2 个容器,你可以使用两对伪元素作为 Angular ,如下所示:

.outer {
width: 120px;
background: #a08;
position: relative;
padding: 30px;
}

.inner {
height: 118px;
background: #fff;
border: 1px dashed #a08;
flex: 1;
}

.outer::before, .outer::after, .inner::before, .inner::after {
content: '';
width: 20px;
height: 20px;
background: #a08;
background-clip: padding-box;
border: 1px dashed #a08;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.outer::before {
top: 20px;
left: 20px;
}
.outer::after {
top: 20px;
right: 20px;
}
.inner::before {
bottom: 20px;
left: 20px;
}
.inner::after {
bottom: 20px;
right: 20px;
}
<div class="outer">
<div class="inner"></div>
</div>

关于html - 我将如何在 CSS3 中制作这个边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45532397/

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