css 如何做一个边界，使线从顶部由两部分组成

aiqt4smr 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(179)

有一个边框，分为两部分，它们之间的缩进约为80 px，在这个空间内是文本-黄金。我该怎么做这个边界？最好用纯CSS和HTML。
示例：

在这里，我试图制作这个框架，就像上面的例子一样，但结果，说得委婉一点，不是很好。我不能做一个边界半径，并将空间移动到左侧。

body {
  background: #333;
}

.frame {
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    border-top: 0px solid #FFF;
    border-radius: 17px;
    padding: 0;
    margin-top: 30px;
}

.top-line {
    display: flex;
    justify-content: space-between;
}

.top-line-left,
.top-line-right {
    flex: 1;
    height: 1px;
    background-color: #FFF;
}

.top-line-left {
    margin-right: 80px;
}

.content {
    padding: 20px;
}

<div class="frame">
    <div class="top-line">
        <div class="top-line-left"></div>
        <div class="top-line-right"></div>
    </div>
    <div class="content"></div>
</div>

P.S.我刚开始学习HTML和CSS，不要太苛刻地判断代码。我很乐意接受任何批评和建议

css

来源：https://stackoverflow.com/questions/76148584/how-to-make-a-boundary-so-that-the-line-from-the-top-consists-of-two-parts

2条答案

按热度按时间

zwghvu4y1#

如果外部背景颜色已知，您可以执行以下操作：

body {
  background: #333;
}

.frame {
    border: 1px solid #FFF;
    border-radius: 17px;
    padding: 0;
    margin-top: 30px;
    position: relative;
}

.frame .title {
    background: #333;
    position: absolute;
    top: -8px;
    left: 30px;
    padding: 0 10px;
}

.content {
    padding: 20px;
}

<div class="frame">
    <span class="title">The title</span>
    <div class="content">
         <p>content</p>
    </div>
</div>

调整.title类的顶部、左侧和填充以匹配布局

赞(0）回复(0）举报 2023-05-02

polhcujo2#

一种简单的方法是使用HTML标记fieldset和legend

.frame{
  height:200px;
  background-color:/* blue */;
  border-radius: .5rem;
  border:red 2px solid;
  outline:none;
}

<fieldset class="frame">
  <legend>
   Gold
  </legend>
   
</fieldset>

赞(0）回复(0）举报 2023-05-02

我来回答

css 如何做一个边界，使线从顶部由两部分组成

2条答案

相关问题

热门标签

最新问答