对于我的Web应用程序的登录页面,我试图创建一个显示在虚线上的标题(类似于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>
最佳答案
在下面的示例中,您不需要知道背景色,可完美缩放,点扩展到标题的剩余空间。
实际上,标题可以换行。
随时根据您的需要进行调整,并且不要忘记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;
}
}
}