语法
initial-letter: normal | <number> | <integer>;
首字母属性示例:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Slabo 27px';
font-size: 1.5em;
line-height: 1.5;
padding: 40px 0;
}
article {
width: 80%;
}
.example::first-letter {
-webkit-initial-letter: 2;
initial-letter: 1;
color: #8ebf42;
font-weight: bold;
margin-right: .60em;
}
</style>
</head>
<body>
<article class="example">
生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花,一瞬间,看尽繁华。是谁把思念翻起了浪花,一转身,浪迹天涯。
</article>
</body>
</html>
CSS initial-letter 属性值说明
| 值 | 描述 |
|---|---|
| normal | 没有初始字母效果。这是此属性的默认值。 |
| <number> | 指定首字母的大小,它占用了多少行。不允许使用负值。 |
| <integer> | 指定初始字母应沉没的线条数。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
initial-letter 属性指定第一个字母和它占用的行数。
此属性出现在首字母大于其余内容的报纸中。
此属性具有三个值:normal、<number>、<integer>。
不允许使用负值。
只有 Safari 支持此属性。
| 初始值 | 普通的 |
|---|---|
| 应用于 | ::first-letter伪元素 以及块容器的第一个内联级的子元素 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | Object.Style.Initialletter = "<数字>" |
日期:2020-06-02 22:14:35 来源:oir作者:oir
