300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > html首字母样式 CSS实现段落首字母 首字放大特效

html首字母样式 CSS实现段落首字母 首字放大特效

时间:2023-10-17 11:30:50

相关推荐

html首字母样式 CSS实现段落首字母 首字放大特效

摘要:

段落首字母放大是指放大段落开头的字母或者汉字,主要使用了css的first-letter伪类选择器。

单行放大:

在第一行内放大,效果如下:

复制代码代码如下:

Document

body {

background-color: #FFFFFF;

color: #595959;

}

.contain {

width: 150px;

}

.contain p {

font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;

}

.contain p:first-letter {

font-size: 2em;

padding: 0.1em;

color: #000000;

vertical-align: middle;

}

.contain p:first-line {

color: red;

}

.contain p:first-child:first-letter {

color: red;

}

.contain p:first-child:first-line {

color: inherit;

}

This is a test article. This is a test article.

This is a test article. This is a test article.

这是一个测试

注意:first-letter支持IE7+,first-line支持IE8+

多行放大:

效果如下:

复制代码代码如下:

Document

* {

margin:0;

padding:0;

}

body {

font-size:12px;

font-family: Tahoma, Geneva, sans-serif;

padding:200px;

}

p {

width:150px;

color:#000;

font-size:1em;

margin-bottom: 20px;

}

p:first-letter{

float: left;

font-size:2.5em;

padding-right:5px;

text-transform:uppercase;

}

p:first-line{

color:#f00;

}

This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.

这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。