CSS 中的 :first-letter

最新推荐文章于 2021-08-04 02:39:37 发布

weballan

最新推荐文章于 2021-08-04 02:39:37 发布

阅读量340

点赞数

分类专栏： html css 文章标签： CSS 伪类

本文链接：https://blog.csdn.net/weballan/article/details/83975828

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

对CSS熟悉的人一般都会了解 :first-letter 这个不常用的伪元素，它可以用来设定文章段落中首字母的样式。不少人只是用它结合 font-size 和 float 来制作简单的首字下沉效果，其实首字下沉可以变得更漂亮一点，比如像这个页面中的那样。
今天在网上发现的这篇文章（俄文的，我没仔细看内容，就看图片和代码了）就是讲解 :first-letter 可实现的效果，利用 background 等属性做出来让人惊奇的东西，CSS 果然很强大，你了解得越多，它就能越好地为你服务。实现漂亮首字下沉的实例代码如下：

p:first-letter {  float:left;    padding: 10px;    margin: 4px 10px 4px 0;    background:#fff url(fl_bg.jpg) center bottom no-repeat;    color: #000;    font-size:160px;    line-height: 1em;    border: 1px solid #000;