如何为首字母轮廓添加底部边框?在下面的示例中,
我尝试过CSS组合技巧等,但没有成功。我确信某种伪属性和/或伪元素会显示浏览器DOM,无论Word应用程序程序员在文档中触摸单词并在该触摸单词的第一个字母下面轮廓底部边框时显示什么(这个有吸引力的编程工件或特征不打印。链接的示例是Wordpad.exe中的Impact字体,36号字体大小。小“t”下的轮廓边框。) 预期输出:
CSS3有属性
你可以在W3 schoolhouse免费试玩一些支持border image的CSS3属性。如果所有其他方法都失败了,请使用一个drop-cap布局,但是示例中的span标签是有原因的:我们希望image-border属性的轮廓线内联。这意味着需要使用元素和/或属性选择器来适应DOM的HTML行为。有什么想法吗? 参考文献
p:first-letter
,我只得到了红色的下划线。甚至无法得到首字母轮廓(轮廓=块元素)!是否有其他方法来为:first-letter
添加底部边框的轮廓?我尝试过CSS组合技巧等,但没有成功。我确信某种伪属性和/或伪元素会显示浏览器DOM,无论Word应用程序程序员在文档中触摸单词并在该触摸单词的第一个字母下面轮廓底部边框时显示什么(这个有吸引力的编程工件或特征不打印。链接的示例是Wordpad.exe中的Impact字体,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>
border-image
。添加border-left: 0;
等,或者border-image: url(border.png) 0 0 30 0 stretch;
,你会发现border-image只能在底部显示(对于块元素而言,不是内联的)。
CSS Tricks - Gradient Borders [伪元素块级击穿]你可以在W3 schoolhouse免费试玩一些支持border image的CSS3属性。如果所有其他方法都失败了,请使用一个drop-cap布局,但是示例中的span标签是有原因的:我们希望image-border属性的轮廓线内联。这意味着需要使用元素和/或属性选择器来适应DOM的HTML行为。有什么想法吗? 参考文献
《CSS3视觉快速入门指南》,Jason Cranford Teague,第6章 文本属性,第167页。