第一封信上的边框轮廓

Question

如何勾勒出第一个字母的下边框？在下面的示例中,p:first-letter我得到的只是红色下划线.甚至无法得到第一个字母的轮廓(Outline = Block Elements)!是否有其他方法来编写a的底部边框的轮廓:first-letter？

我试过CSS组合技巧等没有成功.我确信某个类型的伪属性和/或伪元素会显示给浏览器DOM,无论Word应用程序程序员在文档中触摸单词时是什么,并在该单词的第一个字母下面勾勒出底部边框(这有吸引力的编程工件或功能不打印.链接的示例是字体Impact,Wordpad.exe中的字体大小36.小"t"下的边框.

预期产出:

p:first-letter {border-bottom: 1px solid red;font-size: 48px;}
p:first-letter*=["border-bottom"] {outline: green solid thin;}

<p><span class="spec">Note...</span> Outline properties work best if !DOCTYPE is specified.</p>

CSS3拥有该属性border-image.添加border-left: 0;等,或者border-image: url(border.png) 0 0 30 0 stretch;您可以看到边框图像只能显示在底部(不是内联,对于块元素).

CSS技巧 - 渐变边框 [伪元素块敲除]

您可以在W3校舍免费游玩,其中一些css3属性支持边框图像.失败一切,大惊小怪的安排,但是示例中的跨度是有原因的:我们想要图像边界属性的内联轮廓.这意味着使用元素和/或属性选择器调整["敲除"？] DOM的HTML行为.有任何想法吗？

参考

• CSS技巧 - 大纲

• W3Schools - 尝试边境图像

• "CSS3 Visual Quickstart Guide",Jason Cranford Teague,第6章文本属性,第167页.

Answer 1

要在第一个字母的伪元素上创建ouline,可以使用框阴影.
我评论了CSS代码,以便您可以看到box-shadow属性的每一行:

p:first-letter {font-size: 48px;
  box-shadow: 
    0 3px 0 -1px #fff, /* to indent the green bottom line with the same color as the background */
    0 3px 0 0 green,  /* to create a bottom 3px high green line */
    inset 0 -1px 0 0 green; /* to create the top (1px) of the outline */
}

<p><span class="spec">Note...</span> Outline properties work best if !DOCTYPE is specified.</p>
<p><span class="spec">Info.</span> Outline properties work best if !DOCTYPE is specified.</p>

Answer 2

以下是使用a pseudo-element为第一个字母生成轮廓(类似于PNG图像)的选项.

这种方法的棘手部分是pseudo-element需要根据第一个字母的宽度设置宽度,如果不是,则轮廓将比第一个字母更宽/更窄.为了得到这个排序,我添加了一个data-first-letter到属性p标签,并已将此作为content的pseudo-element,并给予其相同font-size的p:first-letter.你必须以某种方式为每个这样的段落键入正确的值(手动或使用JS).

p:first-letter {
  font-size: 48px;
}
p {
  position: relative;
}
p:after {
  position: absolute;
  top: 1em; /* setting in em to make positioning change in accordance with font-size */
  left: 0px; /* if you have a padding left on the paragraph then this should have an equivalent offset */
  content: attr(data-first-letter); /* to make the width of the outline same as first letter */
  font-size: 48px; /* same as first letter */
  width: auto;
  height: 1px;
  overflow: hidden; /* to make sure the content is not displayed */
  outline: 1px solid green; /* or border: 1px solid green; */
}

/* to demonstrate the changes when padding left is used */

.withpadding{
  padding-left: 20px;
}
.withpadding:after{
  left: 20px;
}

<p data-first-letter='N'>
  <span class="spec">Note...</span> Outline properties work best if !DOCTYPE is specified.
</p>

<p data-first-letter='I'>
  <span class="spec">Info...</span> Outline properties work best if !DOCTYPE is specified.
</p>

<p data-first-letter='I' class="withpadding">
  <span class="spec">Info...</span> Outline properties work best if !DOCTYPE is specified.
</p>

最后,还要注意一些其他要点:

1. p:first-letter*=["border-bottom"]提供的示例中的选择器是错误的.CSS只有属性选择器,你不能验证元素是否有底边框(我假设是你的意图).
2. first-letter伪元素不支持outline链接的MDN页面中指定的属性,因此无法使用它.