css仿word首字下沉效果示例
网站建设 2023-01-28 21:39www.1681989.com免费网站
css首个文字下沉效果
用过word的大部分人都知道，word里有一个首字下沉功能，在文章的排版时用，有时能给文章增色不少。
用css仿word的首字下沉功能，不用修改代码，只用到css的伪元素:first-letter，即可实现首字下沉效果。
复制代码
代码如下:<p><span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscg elit. Mauris tristique lobortis orci ac lacia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitud. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tcidunt a sapien. Phasellus elit nibh, adipiscg sed blandit vel, terdum et arcu.</p>
.firstcharacter {
float: left;
color: #903;
font-size: 75px;
le-height: 60px;
paddg-: 4px;
paddg-right: 8px;
paddg-left: 3px;
font-family: Geia;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscg elit. Mauris tristique lobortis orci ac lacia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitud. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tcidunt a sapien. Phasellus elit nibh, adipiscg sed blandit vel, terdum et arcu.</p>
p:first-child:first-letter {
float: left;
color: #903;
font-size: 75px;
le-height: 60px;
paddg-: 4px;
paddg-right: 8px;
paddg-left: 3px;
font-family: Geia;
}