使用选择器在页面插入内容
在CSS3中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容，比如对H2使用before选择器在H2的前面插入文字“Title”等。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用选择器插入内容</title>
<style>
h2:before{
content: "Title";
color:#fff;
background: green;
padding: 1px 5px;
margin-right: 10px;
}
h2.nocontent:before{
content: none;
}
</style>
</head>
<body>
<h1>使用选择器插入内容</h1>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2 class="nocontent">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
</body>
</html>
使用选择器插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径，比如在标题前插入一张图片！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入图片</title>
<style>
/*h2:after{*/
/*content: url(hot.gif);*/
/*}*/
h2.hot:after{
content: url(hot.gif);
}
h2.digest:after{
content: url(digest.gif);
}
h2.xinren:after{
content: url(xinren.gif);
}
</style>
</head>
<body>
<h1>插入图片</h1>
<h2 class="hot">这是最近很火的帖子</h2>
<h2 class="digest">精心为您挑选的帖子</h2>
<h2 class="hot">这是最近很火的帖子</h2>
<h2 class="hot">这是最近很火的帖子</h2>
<h2 class="xinren">新人报道</h2>
<h2 class="hot">这是最近很火的帖子</h2>
<h2>插入图片文件</h2>
</body>
</html>
使用选择器插入项目编号
可以在多个标题前加上连续编号、在标题/项目编号中追加文字等等。
还可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如小括号、单引号、双引号之类的文字字符
1、text-shadow属性：在CSS3中可以用text-shadow属性给页面上的文字添加阴影效果；
文字阴影
text-shadow属性的使用方法：text-shadow:length length length color;其中第一个length表示的是阴影离开文字的横方向距离，第二个length表示的是阴影离开文字的纵方向的距离，第三个length表示的是阴影模糊半径，color表示的是阴影的颜色；
h1{
text-shadow: 15px 15px 1px lightblue;
}
自动换行
word-break属性：
浏览器文本自动换行：
指定自动换行的处理方法：在CSS3中可以使用word-break属性来设置自动换行的处理方法，使用方法：标签{word-break:值;}：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
