Question

有没有办法从文字字符中创建底部边框，例如我可以拥有border-bottom＆＃34; XXXXXXXXXXXXXXXXXX＆＃34;或＆＃34; ---------------------＆＃34;？

据我了解，我可以使用带有重复图像或规则（例如border-solid）的CSS创建底部边框。

我意识到我可以做border-bottom: thick dotted这样的事情来实现虚线效果，但我希望边框采用特定的字体，这对我没有帮助。

基本上，我想要的是一个在自定义字体中看起来像这样的标题

这是我开始的地方：

h1 { 
    font-family: 'Special Elite', cursive; font-size: 2em;
    padding-bottom: .2em; 
    border-bottom: ?????????;
    margin-top: 0;
    margin-bottom: 1.7em;
}

我可能会以错误的方式解决这个问题 - 非常感谢任何帮助。

Answer 1

你的想法对我来说似乎很好（我看到除了使用图像之外没有其他CSS选择），你甚至可以使用不同的颜色，从可以通过文本阴影重复的长度开始：

h1 {
  font-family: 'Special Elite', cursive;
  position:relative;
  overflow:hidden;
  padding-bottom:0.5em;
  }
h1:after {
  position:absolute;
  line-height:0.5em;
  bottom:0;
  left:0;
  right:0;
  white-space:pre;
  content:'-     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     -     ';
  text-shadow: 0.7em 0 tomato, 1.4em 0 turquoise;
  }
  
  hr + h1:after {
     text-shadow: 0.7em 0.2em tomato, 1.4em -0.2em turquoise;
    }

<link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<h1>Unit 1 - Introductions</h1>
<hr/>
<h1>Up & down </h1>

codepen to play with

Answer 2

您可以使用伪元素:after

h1 {
  font-size: 1em;
  position: relative;
  margin:50px 0
}
h1:after {
  content: "-------------------------------------------------------------";
  position: absolute;
  bottom: -20px;
  left: 0
}
.arial {
  font-family: Arial
}
.cursive {
  font-family: cursive
}

<h1 class="arial">this has to be dashed underline</h1>
<h1 class="cursive">this has to be dashed underline</h1>

Answer 3

我建议使用图像，但如果你真的想使用实际角色，你可以做一些像这样的疯狂事情：

@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro:400,700);
@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);

body {font-family: 'Dancing Script', cursive;}

h1 {color:red;}

h1:after {
 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
  width:99%;
  overflow:hidden;
  display: block;
  font-size:10px;
  white-space:nowrap;
}

h2 {color:orange; font-family: 'Anonymous Pro';}
h2:before, h2:after {
 content:"=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-";
  width:99%;
  overflow:hidden;
  display: block;
  font-size:10px;
  white-space:nowrap;
}

h3 {font-family: 'Abril Fatface'; color:black; text-align: center;}

h3:before, h3:after {
 content:"ABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZABCDEFGHIJKLMNOPQRSTUWXYZ";
  width:99%;
  overflow:hidden;
  display: block;
  font-size:10px;
  white-space:nowrap;
  margin:10px auto;
}

<h1>Damn, Border!</h1>

<h2>Back at it again!</h2>

<h3>ALL THESE LETTERS</h3>

jsFiddle：https://jsfiddle.net/azizn/89og4bg2/

基本上我们添加了一个充当“边框”的伪选择器，你可以随意设置它的样式。添加overflow:hidden可确保它不会创建奇怪的滚动条。

Answer 4

与所有其他答案相反：是的，这完全可以使用CSS图像边框：使用和SVG“图像”使用您想要用作边框的任何文本。按照以下方式创建SVG：

<svg xmlns='http://www.w3.org/2000/svg' width='...' height='...'>
  <text x='0' y='...lineheight...'>xxxx...xxxxx</text>
  <!-- and then use <g transform=...> to create three more
       copies of this line, so that it acts as border -->
<svg>

然后使用CSS边框（将没有换行符的SVG代码插入...部分）：

.bordered {
  border: 10px solid transparent;
  border-image: url("data:image/svg+xml;utf8,...") 1 stretch;
}

然后我们走了。我没有做完整的SVG，但是这里有一个例子：http://jsbin.com/xizuyuzode/edit?html,css,output

阅读CSS图像边界语法，并使用SVG获得更精确的结果。

如何使用文本字符（如短划线，字母或数字）在CSS中创建边框底部

4 个答案: