一个简单的CSS Drop-CAP

您不可能未能注意到我们在新博客设计中使用的Drop-CAP效果，以及大多数浏览器显示的一线尺寸（出于Safari除外，出于我稍后会解释的原因）。

有很多用于实现此效果的骇客方法，但是使用：第一字母和：一线伪级是纯CSS 。

这种方法意味着没有其他标记，没有图像，也不需要了解内容 - 无论第一字母和第一行都是什么，它们都会适用。

这是CSS 实现的：

#post-content > p:first-child:first-line, 
#post-content > .ad:first-child + p:first-line
{
    text-transform:uppercase;
    position:relative;
    font-size:0.95em;
    letter-spacing:1px;
}

#post-content > p:first-child:first-letter, 
#post-content > .ad:first-child + p:first-letter
{
    letter-spacing:0;
    text-transform:uppercase;
    color:#628fbe;
    font-family:times,serif;
    font-size:3.5em;
    float:left;
    margin:0.13em 0.2em 0 0;
    line-height:0.7;
}

您会注意到如何在内容区域内的第一段中尝试将效果应用于效果。它需要足够灵活，以便在段落之前允许或缺乏AD的存在，标记为

。因此，理想情况下，我本来可以使用的：一键式，它在其父上下文中选择了指定类型的第一个元素：

#post-content > p:first-of-type:first-line
{
}

#post-content > p:first-of-type:first-letter
{
}

但这并没有得到广泛的支持；我们使用的选择器意味着我们获得了我们否则不会的IE8

的支持。

对于一线提高，我们不幸的是，我们没有得到野生动物园的支持。这不是因为选择器支持此处显示的所有示例，并且确实在这些规则中应用了其他属性，而是不应用文本转换。这是我在许多不同的情况下注意到的事情，在许多不同的情况下，Safari不应用转换，并没有明显的原因。我已经看到它不适用于适用于相应的的元素，在这里我们看到它不适用于该段落的第一行，即使它适用于整个段落，它也可以使用！去数字。

对于下盘本身，您可以看到它实现非常简单。该规则中值得注意的是，将字母融入到位的边距和线路高处的结合。如果我们省略了这两个属性，我们会得到这一点：

施加线高之前的滚筒帽。

您从左到右看到的是Firefox，Opera和Safari。实际上，这是渲染不正确的，而歌剧和野生动物园则正确 - Firefox仍在将父段的线条高度施加到第一个字母上，而忽略了其他浏览器，而其他浏览器则正确地应用了与字母的字体大小相对应的线条高度。

因此，我们可以利用差异来撤离浏览器之间的结果 - 逐渐减少线路高度，这对Firefox没有任何影响，直到我们在Opera和Safari（以及IE8

）中获得类似的结果：

施加线高后的下盘。

然后，这只是添加边距顶部的情况，直到垂直位置看起来正确。

这不是我第一次在Firefox中看到这种渲染行为。而且，由于我们没有只能适用于Firefox的CSS hacks，因此这样的差异实际上是我们应用浏览器调整的唯一方法。随着浏览器的调整，这完全是防止未来的 - 如果Firefox曾经修复其实现并应用正确的线路高度，那么它将像其他人一样首先出现。

具有讽刺意味的是，当Firefox是唯一错误的浏览器时，我们最终应该修复除Firefox以外的所有浏览器！但这就是我们行业的运作方式 - 像您的Missus一样，Firefox是“永远正确的”。

缩略图信用： 经常询问有关CSS Drop Cap

的问题（常见问题解答）

什么是CSS下降帽，为什么使用它？

a css Drop Cap是一种印刷样式，其中段落的第一个字母大于其余的字母，并且掉落以跨越几行。它用于引起对作品开始的关注，使其在视觉上更具吸引力和更易于阅读。这种样式经常在书籍，杂志和网站中看到，以增强用户体验和参与度。

如何创建CSS掉落帽？>

我可以自定义CSS掉落帽的外观吗？您可以更改字体，颜色，大小，甚至添加背景或边框。这使您可以创建一种独特且具有视觉吸引力的设计，该设计与您的网站的样式和品牌相匹配。

是否有CSS Drop Cap的浏览器兼容性问题？但是，在不同的浏览器如何呈现下降盖时可能存在一些不一致之处，尤其是在垂直对齐和填充方面。在多个浏览器中测试您的设计总是一个好主意，以确保其看起来按预期进行。

我可以使用任何文本元素使用CSS Drop Cap吗？

>

> CSS Drop Cap可以应用于任何块级文本元素，例如段落，标题和divs。但是，它可能与预期的内联元素或具有内联的显示值的元素无法正常工作。

>

>为什么我的CSS下降盖不起作用？最常见的问题是错误的CSS语法，将样式应用于内联元素或浏览器兼容性问题。确保您的CSS是正确的，该元素是块级元素，并且您的浏览器支持:: First Lotter pseudo-Element。

>我如何使我的CSS掉落帽响应能力响应？

>

可以使您的CSS下降帽响应响应，您可以使用媒体Queries的大小和位置来调整尺寸的尺寸和位置。这样可以确保您的滴帽在所有设备上看起来都不错，从台式机到手机。

我可以对我的CSS掉落盖盖动画吗？您可以创建诸如淡入，弹跳或旋转之类的效果，以使您的滴帽更具动态性和引人入胜。您可以将颜色，图像或梯度指定为背景。您还可以调整背景的尺寸和位置以适合您的设计。

>我可以将CSS Drop Cap与Web字体使用？

是的，您可以将CSS Drop Cap与Web Fonts一起使用。您可以在CSS中指定字体家庭，以使用自定义字体为您的下降盖。这使您可以创建与网站风格和品牌相匹配的独特和个性化的设计。

>

以上是一个简单的CSS Drop-CAP的详细内容。更多信息请关注PHP中文网其他相关文章！