第一个字母的CSS实现,第一个词放大效应
摘要:
段落的第一个字母扩展是指段落开头的字母或汉字,主要是使用CSS的第一个字母类选择器。
单线放大:
在第一行,效果如下:
复制代码代码如下所示:
文件
{体
背景颜色:# ffffff;
颜色:# 595959;
}
{。包含
宽度:150px;
}
包含p {
字体:80% / 1.6 Verdana,日内瓦,Arial,Helvetica,sans-serif;
}
包含p:第一个字母
字体大小:2em;
填料:0.1em;
颜色:# 000000;
垂直对齐:中间;
}
包含p:第一线
颜色:红色;
}
包含:第一个孩子:第一个字母
颜色:红色;
}
包含{第一个孩子:第一线
颜色:继承;
}
这是一篇测试文章。这是一篇测试文章。
这是一篇测试文章。这是一篇测试文章。
这是测试。
注:第一个字母+支持IE7,IE8 +一线支持
行扩大:
结果如下:
复制代码代码如下所示:
文件
{ *
保证金:0;
填充:0;
}
{体
字体大小:12px;
字体:宋体,日内瓦,无衬线字体;
填料:200px;
}
{ p
宽度:150px;
颜色:# 000;
字体大小:1em;
边距:20px;
}
p:第一个字母{
浮点数:左;
字体大小:2.5em;
填充右:5px;
文本转换:大写;
}
p:第一线{
颜色:# F00;
}
这是一篇测试文章。这是一篇测试文章。
这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。