gpt4 book ai didi

html - 具有内框/边框描边的 CSS 外层 div 元素

转载 作者:太空宇宙 更新时间:2023-11-04 13:06:41 30 4
gpt4 key购买 nike

我正在尝试以下操作。我有一个 div,其中包含一个带有大边框描边的框。这是我一直在玩的代码。

.insta{
background:#000;
width:820px;
height:300px;
margin-left: auto;
margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}

<div class="insta"><div class="inner-line"></div></div>

我得到了这个结果,

enter image description here

我正在尝试将此作为最终结果,

enter image description here

我知道 CSS 提供的框方法,但不知道是否可以使用它来实现。有什么想法或想法吗?

最佳答案

您可以结合使用不使用散布或模糊的框阴影和边框:

CSS

    border: 10px solid white;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);

JSfiddle

关于html - 具有内框/边框描边的 CSS 外层 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25086143/

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