html - 创建覆盖线条的标题 (CSS)

Question

对于我的网络应用程序的登录页面，我尝试创建一个显示在虚线上的标题(类似于 this effect )。这是我目前拥有的:

如何创建这样的虚线不会贯穿标题？我更喜欢尽可能使用最简单的 CSS/HTML，并支持最大数量的浏览器。

---

我的代码非常简陋。到目前为止是:

<h2>New Account:</h2><br>
<h2 style="margin-top:-0.5em;border:2px dashed #ffffff;border-radius:4px;color:white;display: inline-block;padding:10px 5px 5px 5px;">Choose Nickname:<br>Password:<br></h2>

Answer 1

在下面的示例中，您无需知道背景颜色，可完美缩放，点延伸至标题的剩余空间。实际上，标题可以换行。

随时根据您的需要调整它，不要忘记 prefix .

dotted-container {
  border: 2px dotted red;
  border-top-width: 0; 
  margin: 2rem 1rem;
  display: block;
}
dotted-container>.content {
  padding: 1rem;
}
dotted-title {
  display: flex;
  align-items: center;
  height: 2px;
  margin: 0 2px;
}
dotted-title > span {
  padding: 0 1rem;
}
dotted-title:after,
dotted-title:before {
  border-top: 2px dotted red;
  content: '';
  display: inline-block;
  height: 0;
  flex:1;
}

<dotted-container>
  <dotted-title>
    <span>title</span>
  </dotted-title>
  <div class="content">
    Actual content
  </div>
</dotted-container>

<dotted-container>
  <dotted-title>
    <span>some other title</span>
  </dotted-title>
  <div class="content">
    Some other actual content
  </div>
</dotted-container>

<dotted-container>
  <dotted-title>
    <span>and here's a title<br /> on two lines</span>
  </dotted-title>
  <div class="content">
    Some content for a title on two lines.
  </div>
</dotted-container>

当然，您可能希望根据自己的喜好调整边距/填充，并适应多行的任何标题换行。

如果你想用真正的虚线替换“蹩脚”虚线，这里是an example .阅读博客文章以了解它。

关于 border-image 属性的另一篇好文章 here .

另请注意，您不必像我那样使用自定义标签。这是一个例子。您可以使用适用于您的特定情况的类或任何其他选择器。

这是我制作的 SCSS 脚本，您可以使用它来传递选择器和所需的边距/填充值。远非完美，但似乎可以解决问题:

$border-width: 2px;
$border-style: dotted;
$border-color: red;
$container: 'dotted-container';
$title: 'dotted-title';
$content:'.content';
$padding: 2rem;
$margin: 1rem;
$title-padding-value: 3;
$title-padding-unit:rem;

#{$container} {
  border: $border-width $border-style $border-color;
  border-top-width: 0;
  margin: #{$title-padding-value/2}#{$title-padding-unit} $margin $margin $margin;
  display: block;
  > #{$content} {
    padding: #{$title-padding-value/2}#{$title-padding-unit} $padding $padding $padding;
  }
  #{$title} {
    display: flex;
    align-items: center;
    height: $border-width;
    margin: 0 $border-width;
    > span {
      padding: 0 $padding;
    }
    &:after,
    &:before {
      border-top: $border-width $border-style $border-color;
      content: '';
      display: inline-block;
      height: 0;
      flex: 1;
    }
  }
}