CSS3属性

来源：互联网发布：youtube免费代理软件编辑：程序博客网时间：2024/05/22 00:13

border-radius：圆角效果，意思是向元素添加圆角边框。

border-radius 只设置一个属性值时，比如 border-radius:10px; 表示所有角都使用半径为 10 的圆角，也可以单独设置四个角的半径，如 border-radius:2px 3px 4px 5px; 这四个值分别设置的是左上角、右上角、右下角和左下角。除此之外，border-radius 的值也可以用百分比或者em来设置（目前兼容性还不是太好）。

<!doctype html><html><head><meta charset="utf-8"><title>border-radius</title><style type="text/css">div.circle{    height:100px;/*与width设置一致*/    width:100px;    background:#9da;    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/}div.semi-circle{     height:100px;    width:50px;    background:#9da;    border-radius:50px 0 0 50px;}</style></head><body>    <div class="circle"></div><br/>    <div class="semi-circle"></div></body></html>

实现的效果如下所示：

box-shadow：像盒子添加阴影。支持添加一个或多个，语法规则：

box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 具体的如下图所示：

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

<!doctype html><html><head><meta charset="utf-8"><title>boxshadow</title><style>.boxshadow-outset{    width:100px;height:100px;    box-shadow:4px 4px 6px #666; }.boxshadow-inset{    width:100px;    height:100px;    box-shadow:4px 4px 6px #666 inset; }.boxshadow-multi{    width:100px;    height:100px;    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;}</style></head><body>    <h2>外阴影</h2>    <div class="boxshadow-outset"></div>    <br />    <h2>内阴影</h2>    <div class="boxshadow-inset"></div>    <br />    <h2>多阴影</h2>    <div class="boxshadow-multi"></div></body></html>

text-overflow：用来设置是否使用一个省略标记（...）标示对象内文本的溢出，语法规则：

text-overflow: clip | ellipsis; //clip表示剪切；ellipsis表示显示省略符号。

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。此外，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行：

word-wrap: normal | break-word; //normal 表示控制连续文本换行，break-word 表示内容将在边界内换行

注意：normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>text-overflow</title><style type="text/css">.test_demo{    text-overflow:ellipsis;     overflow:hidden;     white-space:nowrap;     width:200px;     background:#ccc;}</style></head> <body>    <div class="test_demo">       超酷的IT技术学习平台（我是省略号）    </div></body></html>

代码运行效果：

@font-face：嵌入字体，能够加载服务器端的字体文件，让浏览器可以显示用户电脑里没有安装的字体。

@font-face{

font-family:字体名称;

src:字体文件在服务器上的相对或绝对路径;

}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式，，比如：

font-size: 16px;

font-family: "My Font"; //必须项，设置 @font-face 中 font-family 同样的值

}

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>嵌入字体</title><style type="text/css">@font-face {    font-family: "MOOC Font";    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");}.demo {    width: 340px;    padding: 30px;        color: #566F89;    background: #000;    font-size:58px;    font-family: "MOOC Font";}</style>  </head> <body>    <div class="demo">IMOOC</div></body></html>

效果：

text-shadow：用来设置文本的阴影效果，语法：text-shadow: x-Offset y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将blur值设置为0；

color：是指阴影的颜色，也支持使用rgba色。

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>text-shadow</title><style type="text/css">.demo {    width: 340px;    padding: 30px;    font: bold 55px/100% "微软雅黑";    background: #C5DFF8;    text-shadow: 2px 2px 0 #0f0;}</style>  </head> <body>    <div class="demo">IMOOC</div></body></html>

transform：向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转（rotate）、缩放（scale）、移动（translate）或倾斜（skew）。浏览器的支持情况：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

rotate()：旋转，通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

scale()：缩放，让元素根据中心原点对对象进行缩放

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。其中，Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style type="text/css">.wrapper {  width: 200px;  height: 200px;  border:2px dashed red;  margin: 100px auto;}.wrapper div {  width: 200px;  height: 200px;  line-height: 200px;  background: orange;  text-align: center;  color: #fff;}.wrapper div:hover {  opacity: .5;  -webkit-transform: scale(0.8);  -moz-transform: scale(0.8);  transform: scale(0.8);}</style></head> <body>    <div class="wrapper">        <div>我将缩小0.8</div>    </div></body></html>

鼠标移入后缩小0.8：

translate()：位移函数，可以将元素向指定的方向移动，类似于position中的 relative。或简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

1、translate( x, y )水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX( x )仅水平方向移动（X轴移动）

3、translateY( y )仅垂直方向移动（Y轴移动）

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>translate()</title><style type="text/css">.wrapper {  width: 200px;  height: 200px;  border: 2px dotted red;  margin: 20px auto;}.wrapper div {  width: 200px;  height: 200px;  line-height: 200px;  text-align: center;  background: orange;  color: #fff;  -webkit-transform: translate(50px,100px);  -moz-transform:translate(50px,100px);  transform: translate(50px,100px);}</style></head><body>    <div class="wrapper">        <div>我向右向下移动</div>    </div></body></html>

skew()：扭曲，扭曲 skew() 函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style type="text/css">.wrapper {width: 300px;height: 100px;border: 2px dotted red;margin: 30px auto;}.wrapper div {width: 300px;height: 100px;line-height: 100px;text-align: center;color: #fff;background: orange;-webkit-transform: skew(45deg);-moz-transform: skew(45deg);transform:skew(45deg);}.wrapper span {display:block;-webkit-transform: skew(-45deg);-moz-transform: skew(-45deg);transform:skew(-45deg);}</style></head> <body>    <div class="wrapper">        <div><span>我不想被扭曲(^_^)</span></div>    </div></body></html>

transition：过渡属性，transition是一个复合属性，主要包括以下几个子属性：

1、transition-property：指定过渡或动态模拟的CSS属性

transition-property 用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

demo：鼠标经过时，div 的宽度逐渐增加至 400px：

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style type="text/css">div {  width: 200px;  height: 200px;  background: red;  margin: 20px auto;  -webkit-transition-property: width;  transition-property: width;   /*过渡动画的属性*/  -webkit-transition-duration:.5s;  transition-duration:.5s;  /*过渡所用时间*/  -webkit-transition-timing-function: ease-in;  transition-timing-function: ease-in;  /*过渡所用函数*/  -webkit-transition-delay: .18s;  transition-delay:.18s; /*动画延迟时间*/}div:hover {  width: 400px;}</style></head> <body>    <div></div></body></html>

特别注意：当“transition-property”属性设置为all时，表示的是所有中点值的属性（一般设置为 all）。

比如，假设你的初始状态设置了样式“width”,“height”,“background”,当你在终始状态都改变了这三个属性，那么all代表的就是“width”、“height”和“background”。如果你的终始状态只改变了“width”和“height”时，那么all代表的就是“width”和“height”。

2、transition-duration：指定完成过渡所需的时间

transition-duration 属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。

demo：鼠标移入时，div 的高度变为 100px，这个过程所需时间为 1s：

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style type="text/css">div {  width: 300px;  height: 200px;  background-color: orange;  margin: 20px auto;  -webkit-transition-property: height;  transition-property: height;  -webkit-transition-duration: 1s;  transition-duration: 1s;  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;  -webkit-transition-delay: .2s;  transition-delay: .2s;}div:hover {  height: 100px;}</style></head> <body>    <div></div></body></html>

3、transition-timing-function：指定过渡函数

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

demo：在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数：

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style type="text/css">div {width: 200px;height: 200px;background: red;margin: 20px auto;-webkit-transition-property: -webkit-border-radius;transition-property: border-radius;-webkit-transition-duration: .5s;transition-duration: .5s;-webkit-transition-timing-function: ease-in-out;transition-timing-function: ease-in-out;-webkit-transition-delay: .2s;transition-delay: .2s;}div:hover {border-radius: 100%;}</style></head> <body><div></div></html>

4、transition-delay：指定开始出现的延迟时间

transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。

有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。

例如：a{ transition: background 0.8s ease-in 0.3, color 0.6s ease-out 0.3;}

demo：

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style type="text/css">.wrapper {width: 400px;height: 200px;margin: 20px auto;border: 2px dotted red;position:relative;}.wrapper div {padding: 15px 20px;color: #fff;background-color: orange;position: absolute;top: 50%;left:50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);-webkit-transition: all .5s ease-in .2s;transition: all .5s ease-in .2s;}.wrapper div:hover {background-color: red;border-radius: 10px;}</style></head> <body>    <div class="wrapper">        <div>鼠标放到我的身上来</div>    </div></body></html>

keyframes：被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。比如：

<span style="font-size:14px;">@keyframes changecolor{  0%{   background: red;  }  100%{    background: green;  }}</span>

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

浏览器的支持情况：Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

<!DOCTYPE html><html><head> <meta charset="utf-8"><title>变形与动画</title><style type="text/css">@keyframes changecolor{0%{background: red;}20%{background:blue;}40%{background:orange;}60%{background:green;}80%{background:yellow;}100%{background: red;}}div {width: 300px;height: 200px;background: red;color:#fff;margin: 20px auto;}div:hover {animation: changecolor 5s ease-out .2s;}</style></head> <body>    <div>鼠标放在我身上试试看</div></body></html>

columns：多列布局，主要就两个属性参数：列宽和列数。到目前为止大部分主流浏览器都对其支持：

语法：columns: <columns-width> | <columns-count>;

<!doctype html><html><head><meta charset="utf-8"><title>columns</title><style type="text/css">.columns {width: 500px;padding: 5px;border: 1px solid green;margin: 20px auto; -webkit-columns: 150px 3;-moz-columns: 150px 3;-o-columns:150px 3;-ms-columns: 150px 3;columns: 150px 3;}</style></head><body><div class="columns">  <h2>我要分列显示</h2>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p></div></body></html>

column-width：和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可

以和多列属性中其他属性配合使用。其基本语法：column-width: auto | <length>;

如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

column-count：主要用来给元素指定想要的列数和允许的最大列数。其语法规则：column-count: auto | <integer>;默认属性值为auto，表示元素只有一列，其主要依靠浏览器计算自动设置。

column-gap：主要用来设置列与列之间的间距，语法规则：column-gap: normal | <length>; 默认值是normal，默值为1em（如果你的字号是px，其默认值为你的font-size值）。<length>用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

column-rule：主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则：

column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>;

<!doctype html><html><head><meta charset="utf-8"><title>列表边框column-rule</title><style type="text/css">.columns {padding: 5px;border: 1px solid green;width: 900px;margin: 20px auto;-webkit-column-count:3;-moz-column-count:3;-o-column-count:3;-ms-column-count:3;column-count:3;-webkit-column-gap: 2em;-moz-column-gap: 2em;-o-column-gap: 2em;-ms-column-gap: 2em;column-gap: 2em;-webkit-column-rule:3px solid #ccc;-moz-column-rule:3px solid #aaa;-o-column-rule:3px solid #ccc;-ms-column-rule:3px solid #ccc;column-rule:3px solid #aaa;}</style></head><body><div class="columns">  <h2>我要分列显示</h2>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p></div></body></html>

column-span：主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，语法：column-span: none | all ; 默认值为none，表示不跨越任何列。all 跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

<!doctype html><html><head><meta charset="utf-8"><title>跨列设置column-span</title><style type="text/css">.columns {  padding: 5px;  border: 1px solid green;  width: 900px;  margin: 20px auto;    -webkit-column-count:3;  -moz-column-count:3;  -o-column-count:3;  -ms-column-count:3;  column-count:3;    -webkit-column-gap: 2em;  -moz-column-gap: 2em;  -o-column-gap: 2em;  -ms-column-gap: 2em;  column-gap: 2em;    -webkit-column-rule: 3px gray solid;  -moz-column-rule: 3px gray solid;  -o-column-rule: 3px gray solid;  -ms-column-rule: 3px gray solid;  column-rule: 3px gray solid;}h2{  background: green;  padding: 10px;  color: #fff;}h2,p:nth-child(2n){  -webkit-column-span:all;  -moz-column-span:all;  -o-column-span:all;  -ms-column-span:all;  column-span:all;}</style></head><body><div class="columns">  <h2>我要分列显示</h2>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p>  <p>为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面。对于文本的多列布局，我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示。</p></div></body></html>

box-sizing：定义盒模型的尺寸解析方式，其语法规则如下：box-sizing: content-box | border-box | inherit;

其中最为关键的是box-sizing中content-box和border-box两者的区别，他们之间的区别可以通过下图来展示，其对盒模型的不同解析：

resize：自由缩放属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。语法：resize: none | both | horizontal | vertical | inherit ; 取值说明：

例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：

textarea {  -webkit-resize: horizontal;  -moz-resize: horizontal;  -o-resize: horizontal;  -ms-resize: horizontal;  resize: horizontal;}

CSS3生成内容：在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。

content配合CSS的伪类或者伪元素，一般可以做以下四件事情：

在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：

.clearfix:before,.clearfix:after {       content:””;       display:table;}.clearfix:after {       clear:both;       overflow:hidden;}

demo:

<!doctype html><html><head><meta charset="utf-8"><title>CSS生成内容</title><style type="text/css">h1:before {        content:"我是被插进来的";        color: red;    }</style></head><body>    <h1>我是标题，在我前面插入内容吧</h1></body></html>

效果：

0 0