如何在另一个框的边框上创建一个 CSS 框？

Question

我想在另一个框的边框上渲染一个框，如下图所示： Expected Output

我试过使用 flexbox 来做这个，但找不到任何解决方案。

我该如何处理这个设计？如有任何帮助，我们将不胜感激！

Answer 1

这可以使用 legend. 实现如果你想要自定义样式，然后在 parent div（你称之为带边框的框）上使用 postiion: relative，使用position: absolute 在 child div 上调整顶部、左侧、边距或平移值。

Answer 2

你可以用两个div来做。

第一个 div 带边框
第二个 div 用于阴影框

.outer{
  border:2px solid #333;
  width:200px;
  height:150px;
  border-radius:20px;
}

.inner{
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
width:180px;
height:130px;
margin:10px;
}

<div class="outer">
  <div class="inner">
  </div>
</div>

Answer 3

这是与您展示的图片尽可能接近的复制品。

卡片容器使用position:relative定位，内部零件使用position:absolute定位。

.card{
  position:relative;
  width: 400px;
  height: 200px;
  border: solid 2px gray;
  border-radius: 15px;
  padding: 5px 5px 5px 5px;
  text-align: center;
  background: linear-gradient(white 50%, #F1FAFF 50%); 
  margin-top: 100px;
}

.inner{
  border: solid 1px lightgray;
  border-top: none;
  height: 80%;
  width: calc(100% - 20px);
  box-shadow: 0px 2px 2px lightgray;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: white;
}

.label{
  position: absolute; 
  top: -15px;
  left: 25px;
  background: #F5F5F5;
  padding: 5px 10px;
  font-family: sans-serif;
  font-weight: 600;
  border-radius: 5px;
}

<div class="card">
  <div class="label">13 Mar - 12 Apr</div>
  <div class="inner">
  </div>
</div>

如何在另一个框的边框上创建一个 CSS 框？

How to create a CSS box on another box's border?

html

css

frontend

flexbox