CSS制作首字下沉

在杂志排版中,常常能看到首字下沉的效果。

在Web的排版中,也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果。

::first-letter实现首字下沉效果

早期中,实现首字下沉都是能过伪元素::first-letter来实现。其实现原重非常的简单,就是把首字font-size值设置较大,然后能过float来实现。比如:

p::first-letter {
    color: #c69c6d;
    float: left;
    font-size: 5em;
    margin: 0 .2em 0 0;
}

上面这段代码将会把所有段落的首字下沉,如果仅需要对首段首字下沉,那还需要配合其它的选择器来实现。

p:first-child::first-letter {
    color: #c69c6d;
    float: left;
    font-size: 5em;
    margin: 0 .2em 0 0;
}

Initial-Letter

前面看到的效果是老式的CSS实现的首字下沉效果。虽然是实现了,但借助float还是存在一定的缺陷,而且灵活度也并不强。不过值得庆幸的是,在CSS Inline Layout Module Level 3提供了一个新的思路和方案:采用initial-letter

这个新属性能非常轻易的帮且我们实现首字下沉的效果,但他只能运用于块容器首行首字。同样需要配合::first-letter一起使用。比如:

.intr
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/initial-letter.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部