Question

如何勾勒第一个字母的下边框？在下面的示例p:first-letter中，我得到的是红色下划线。甚至不能得到第一个字母的轮廓（Outline = Block Elements）！是否有其他方法可以为:first-letter的底部边框编码轮廓？

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

预期输出：

Outline on the bottom border of the first letter

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS Tricks - Gradient Borders [伪元素块淘汰赛]

您可以在W3校舍免费游玩，其中一些css3属性支持边框图像。没有其他事情，大惊小怪的安排，但是示例中的跨度是有原因的：我们希望图像边界属性的内联轮廓。这意味着使用元素和/或属性选择器调整[＆＃34;淘汰＆＃34;？] DOM的HTML行为。有什么想法吗？

参考

CSS Tricks - Outline
W3Schools - Try It Border Image
＆＃34; CSS3 Visual Quickstart Guide＆＃34;，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 */ }

Note... Outline properties work best if !DOCTYPE is specified. Info. Outline properties work best if !DOCTYPE is specified.

Answer 2

以下是使用pseudo-element为第一个字母生成轮廓（类似于PNG图像）的选项。

使用此方法的棘手部分是pseudo-element的宽度需要根据第一个字母的宽度设置，如果不是，则轮廓将比第一个字母更宽/更窄。为了对此进行排序，我在data-first-letter标记中添加了p属性，并将其设置为content的{{1}}并赋予它相同的pseudo-element {1}} font-size。您必须以某种方式为每个此类段落键入正确的值（手动或使用JS）。

p:first-letter

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;
}

最后，还需要注意一些其他要点：

相关提供的示例中的选择器 Note... Outline properties work best if !DOCTYPE is specified. Info... Outline properties work best if !DOCTYPE is specified. Info... Outline properties work best if !DOCTYPE is specified. 是错误的。 CSS只有属性选择器，你无法验证元素是否有底边框（我认为这是你的意图）。
first-letter伪元素不支持链接的MDN页面中指定的p:first-letter*=["border-bottom"]属性，因此无法使用。

第一封信上的边框轮廓

2 个答案: