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

html - 创建覆盖行的标题(CSS)-LMLPHP

如何创建这样的标题,使虚线不贯穿标题?我更喜欢使用可能的最简单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>

最佳答案

在下面的示例中,您不需要知道背景色,可完美缩放,点扩展到标题的剩余空间。
实际上,标题可以换行。

随时根据您的需要进行调整,并且不要忘记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>





当然,您可能想根据自己的喜好调整页边距/边距,并在多行中容纳任何标题换行。

如果要用真实的虚线替换“ cr脚的”虚线,请使用an example。阅读博客文章以了解它。

关于边框图像属性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;
    }
  }
}

10-05 21:03
查看更多