CSS中的首字下沉是一種排版效果,可以讓段落的第一個字重疊在第二行文字的上方,打造出獨特的視覺效果。
p { text-indent: 2em; &:first-of-type::first-letter { font-size: 2em; float: left; margin-right: 0.1em; margin-top: 0.1em; } }
如上述CSS代碼所示,我們可以使用CSS中的偽元素“::first-letter”來選中段落中的第一個字母。為了讓這個字母一行之內顯示完全,我們可以將其字體大小調大,并讓它浮動在左側,與正文文字錯開一定的距離,達到下沉的效果。
此外,我們還可以使用“text-indent”屬性來控制整個段落的縮進,使得下沉的首字更加突出。