【HTML5】Web前端——第六课：CSS3 的变形属性、过渡属性、动画属性、多列属性

朴灿烈づ我的快乐病毒、 2022-12-22 09:13 178阅读 0赞

**知识点：**CSS3 的 2D 变形属性、 3D 变形属性、过渡属性、动画属性、多列属性

**先导知识：**[【HTML5】Web前端——第五课：CSS3新增背景属性、文本属性、盒模型属性][HTML5_Web_CSS3]

CSS3 在原来的基础上增加了变形和动画相关属性，通过这些属性，以前需要用 JavaScript 才能实现的功能，现在可以很轻松地实现。CSS3 的变形功能可以对元素进行位移、旋转、缩放、倾斜 4 种几何变换的操作； CSS3 的动画功能则是和位移、旋转、缩放、倾斜 4 种几何变换操作相结合，从而产生平滑的动画效果。

# 1、  CSS3 的 2D 变形属性 #

### 1.1   transform 属性 ###

transform 属性用于设置元素的变形， 这个属性允许你将元素旋转，缩放，移动，倾斜等。

<table> 
 <tbody> 
  <tr> 
   <td><strong>&nbsp; &nbsp; &nbsp; 属性值</strong></td> 
   <td><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;说明</strong></td> 
   <td><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 参数取值</strong></td> 
  </tr> 
  <tr> 
   <td><strong>translate(x,y)</strong></td> 
   <td> <p><strong>表示元素水平方向移动 x ，垂直方向移动 y ，</strong></p> <p><strong>其中 y 可以省略，表示垂直方向没有位移。</strong></p> </td> 
   <td colspan="1"> <p><strong>x 和 y 的取值，可以是长度单位，如30px ，</strong></p> <p><strong>也可以是百分比，如20%</strong></p> </td> 
  </tr> 
  <tr> 
   <td>translateX(x)</td> 
   <td>表示元素水平方向移动 x 。</td> 
  </tr> 
  <tr> 
   <td>translateY(y)</td> 
   <td>表示元素垂直方向移动 y 。</td> 
  </tr> 
  <tr> 
   <td><strong>rotate(angle)</strong></td> 
   <td><strong>表示元素顺时针旋转 angle 角度</strong></td> 
   <td> <p><strong>angle 单位通常是deg ，1 deg&nbsp;= 1 度。</strong><strong>比如 45deg</strong></p> </td> 
  </tr> 
  <tr> 
   <td><strong>scale(x,y)</strong></td> 
   <td> <p><strong>表示元素水平方向的缩放比为 x ，垂直方向缩放比为 y ，</strong></p> <p><strong>其中 y 可以省略，表示 y 和 x 相同，以保持相同缩放比。</strong></p> </td> 
   <td colspan="1"> <p><strong>x 和 y 的取值是数字，默认值是 1&nbsp;</strong></p> <p><strong>大于 1，放大</strong></p> <p><strong>小于 1，缩小</strong></p> <p><strong>改变的不是元素的宽高，而是 x 和 y 轴的刻度。</strong></p> </td> 
  </tr> 
  <tr> 
   <td>scaleX(x)</td> 
   <td>表示元素水平方向的缩放比为 x 。</td> 
  </tr> 
  <tr> 
   <td>scaleY(y)</td> 
   <td>表示元素垂直方向的缩放比为 y 。</td> 
  </tr> 
  <tr> 
   <td><strong>skew(angleX angleY)</strong></td> 
   <td><strong>表示元素沿着 x 轴方向倾斜 angleX 角度，沿着 y 轴方向倾斜 angleY 角度，其中 angleY 可以省略，表示 y 轴方向不倾斜。</strong></td> 
   <td colspan="1"><strong>angleX 和&nbsp;angleY 取值是数字+ deg ，比如 30deg</strong></td> 
  </tr> 
  <tr> 
   <td>skewX(angleX)</td> 
   <td>表示元素沿着 x 轴方向倾斜 angleX 角度</td> 
  </tr> 
  <tr> 
   <td>skewY(angleY)</td> 
   <td>表示元素沿着 y 轴方向倾斜 angleY 角度</td> 
  </tr> 
  <tr> 
   <td><strong>matrix(a,b,c,d,e,f)</strong></td> 
   <td colspan="2"><strong>将所有2D变形函数（旋转、缩放、移动及倾斜）组合在一起</strong></td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>新增变形属性-王迪</title>
    		<style type="text/css">
    			div{
    				width: 200px;
    				height: 50px;
    				border: 1px solid;
    				background-color: red;
    				margin-left: 300px;
    			}
    			#box2 {
    				position: absolute;
    				top:60px;
    				transform: translate(20px,30px);/*设置元素水平和垂直方向的偏移*/
    			}
    			#box3 {
    				position: absolute;
    				top:100px;
    				left:300px;
    				transform:rotate(45deg);/*设置元素顺时针旋转45度*/
    			}
    			#box4 {
    				position: absolute;
    				top:180px;				
    				transform: scale(2,1);/*设置元素水平方向缩放比为2，垂直方向缩放比为1*/
    			}
    			#box5 {
    				position: absolute;
    				top:300px;
    				transform: skewX(30deg);/*设置元素沿着x轴倾斜*/
    			}
    		</style>                                                                      
    	</head>
    	<body>
    		<div id="box1">盒子1：没有变形</div>
    		<div id="box2">盒子2：水平方向移动20px，垂直方向移动30px</div>
    		<div id="box3">盒子3：顺时针，旋转45度</div>
    		<div id="box4">盒子4：元素水平方向缩放比为2，垂直方向缩放比为1</div>
    		<div id="box5">盒子5：沿着X轴方向，倾斜30度</div>
    	</body>
    </html>

### 示例练习1：制作如下效果（鼠标移上去，导航栏产生2D变形） ###

![20201128195547617.gif][]

**案例知识点：** [伪类选择器的使用][Link 1]

**案例延伸：**试一试给一个元素同时添加多个变形，使用transform属性同时设置多个方法，不同方法之间用空格隔开。

举例：transform: rotate(45deg)  scale(0.5) skew(30deg, 30deg) translate(100px, 100px); 这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

## 1.2   transform-origin 属性 ##

transform-origin 属性用于表示元素旋转的中心点，默认值为 50% 50%。

第一个值，表示元素旋转中心的水平位置，它还可以赋值 left 、right 、center 、长度、百分比；

第二个值，表示元素旋转中心的垂直位置，它还可以赋值 top 、bottom 、center 、长度、百分比。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>新增变形属性-王迪</title>
    		<style type="text/css">
    			div{
    				width: 100px;
    				height: 100px;
    				border: 1px solid;
    				background-image:url(img/头像.jpg);
    				background-size:cover;	
    				margin: 20px 50px;
    				float: left;
    			}
    			#box2 {
    				transform: rotate(45deg);/*设置元素顺时针旋转45度*/				
    			}
    			#box4 {
    				transform: rotate(45deg);
    				transform-origin: left top;
    			}
    			#box6{
    				transform: rotate(45deg);
    				transform-origin: 60% 80px;				
    			}
    		</style>                                                                      
    	</head>
    	<body>
    		<div id="box1">盒子1</div>
    		<div id="box2">盒子2：</div>
    		<hr style="clear: both;" />
    		<div id="box3">盒子3</div>
    		<div id="box4">盒子4</div>
    		<hr style="clear: both;" />
    		<div id="box5">盒子5</div>
    		<div id="box6">盒子6</div>
    	</body>
    </html>

# 2、   CSS3 的 3D 变形属性 #

**理解空间的三维：**向上为-Y，向下为+Y，向左为-X，向右为+X，向前为+Z，向后为-Z。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2][]

## 2.1  transform 属性新增的3个变形函数 ##

<table style="width:591px;"> 
 <tbody> 
  <tr> 
   <td style="width:143px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp;函数名称</strong></td> 
   <td style="width:231px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;说明</strong></td> 
   <td style="width:213px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 使用方法</strong></td> 
  </tr> 
  <tr> 
   <td style="width:143px;">rotateX(angle)</td> 
   <td style="width:231px;">表示元素沿着X轴旋转的角度，类似于我们的单杠运动。</td> 
   <td style="width:213px;">transform: rotateX(180deg);</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">rotateY(angle)</td> 
   <td style="width:231px;">表示元素沿着Y轴旋转的角度</td> 
   <td style="width:213px;">transform: rotateY(180deg);</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">rotateZ(angle)</td> 
   <td style="width:231px;">表示元素沿着Z轴旋转的角度</td> 
   <td style="width:213px;">transform: rotateZ(180deg);</td> 
  </tr> 
 </tbody> 
</table>

### 示例练习2： transform 属性的 3D 变形函数 ###

![20201128190125135.gif][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>3D变形-transform属性-王迪</title>
    		<style type="text/css">
    			* { margin: 0; padding: 0;}
    			ul li {
    				list-style: none;
    				float: left;
    				width: 100px;
    				margin: 20px;
    			}
    			div{
    				border: 1px solid red;
    				width: 100px;
    				height: 100px;
    				background-image: url(img/头像.jpg);
    				background-size: cover;
    				margin: 20px;
    				float: left;
    			}
    			.box2:hover {
    				transform: rotateX(180deg);
    			}
    			.box3:hover {
    				transform: rotateY(180deg);
    			}
    			.box4:hover {
    				transform: rotateZ(180deg);
    			}
    			.box5:hover {
    				transform: rotateX(60deg) rotateZ(180deg);
    			}
    		</style>
    	</head>
    	<body>
    		<ul>
    			<li>正常显示</li>
    			<li>沿着X轴旋转180度</li>
    			<li>沿着Y轴旋转180度</li>
    			<li>沿着Z轴旋转180度</li>
    			<li>沿着X轴旋转60度,沿着Z轴旋转180度</li>
    		</ul>
    		<hr style="clear: both;" />
    		<div class="box1"></div>
    		<div class="box2"></div>
    		<div class="box3"></div>
    		<div class="box4"></div>
    		<div class="box5"></div>
    	</body>
    </html>

##    2.2  transform-style属性 ##

transform-style 属性是 3D 空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat 和 preserve-3d 。 transform-style属性的使用语法非常简单：

*  transform-style: flat;   默认值，表示所有子元素在2D平面呈现。
 *  transform-style: preserve-3d;  表示所有子元素在3D空间中呈现。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3][]

**关键代码：**

**transform-style属性需要设置在父元素中**，并且高于任何嵌套的变形元素。如果你的元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫使子元素出现在同一平面（和元素设置了transform-style为flat一样的效果）（可以修改上述代码，验证一下效果）

## 2.3  perspective属性 ##

perspective的中文意思是：透视，视角。没有透视定义，不成 3D 。对于 perspective 属性，我们可以简单的理解为视距，用来设置用户和元素 3D 空间 Z 平面之间的距离。而其效应由他的值来决定，值越小，用户与 3D 空间 Z 平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与 3D 空间 Z 平面距离越远，视觉效果就很小。

CSS3中3D transform 的透视点是在浏览器的前方！ **当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身**。 perspective(n) 定义视点离屏幕的距离。

![20201128213217466.png][]

*  perspective 取值为none或不设置，就没有真 3D 空间。
 *  perspective 取值越小，3D效果就越明显，也就是你的眼睛越靠近真 3D。
 *  perspective 的值无穷大，或值为 0 时与取值为 none 效果一样。

# 3、 CSS3 的过渡属性实现动画效果 #

CSS3 增加了一些过渡属性，可以为元素增加过渡动画效果，也可以设置在一定的时间内逐渐从一种样式变成另一种样式。过渡 transition 是一个复合属性，包括 transition-property、transition-duration、transition-timing-function、transition-delay 这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。

<table> 
 <tbody> 
  <tr> 
   <td style="width:202px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;属性</strong></td> 
   <td style="width:263px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 作用</strong></td> 
   <td style="width:362px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 属性值</strong></td> 
  </tr> 
  <tr> 
   <td style="width:202px;"><strong>transition-duration</strong></td> 
   <td style="width:263px;"><strong>设置完成过渡的整体时间</strong></td> 
   <td style="width:362px;"><strong>时间，如 2s</strong></td> 
  </tr> 
  <tr> 
   <td style="width:202px;">transition-delay</td> 
   <td style="width:263px;"> <p>设置开始过渡动画的，延迟时间</p> <p>（多长时间以后，开始实现过渡）</p> </td> 
   <td style="width:362px;">时间，如 2s</td> 
  </tr> 
  <tr> 
   <td style="width:202px;">transition-property</td> 
   <td style="width:263px;">设置将哪条css使用过渡</td> 
   <td style="width:362px;"> <p>none</p> <p>all</p> <p>css属性名称列表</p> </td> 
  </tr> 
  <tr> 
   <td style="width:202px;">transition-timing-function</td> 
   <td style="width:263px;">设置过渡的时间曲线</td> 
   <td style="width:362px;"> <p>ease：慢速开始，然后变快，最后慢速结束</p> <p>linear：以相同速度开始至结束的过渡效果</p> <p>ease-in：以慢速开始</p> <p>ease-out：以慢速结束</p> <p>ease-in-out：以慢速开始和结束的过渡效果</p> <p>cubic-bezier(x1,y1,x2,y2)：贝济埃曲线控制动画速度</p> </td> 
  </tr> 
  <tr> 
   <td style="width:202px;"><strong>transition</strong></td> 
   <td style="width:263px;"><strong>一条声明，设置所有过渡属性</strong></td> 
   <td style="width:362px;"><strong>值之间，用空格隔开</strong></td> 
  </tr> 
 </tbody> 
</table>

**复合属性**

过渡 transition 的这四个子属性只有 <transition-duration> 是必需值且不能为 0 。其中，<transition-duration> 和 <transition-delay> 都是时间。当两个时间同时出现时，第一个是<transition-duration>，第二个是 <transition-delay> ；当只有一个时间时，它是<transition-duration>，而 <transition-delay> 为默认值0

### 示例练习3： transition 属性实现的动画过渡 ###

![20201202204350889.gif][]

**实现代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>transition属性-王迪 </title>
    		<style type="text/css">
    			div{/*设置div基本的样式*/
    				width: 200px;
    				height: 100px;
    				background-color: red;
    				margin: 10px;
    			}
    			div:hover{/*设置div需要变化的样式*/
    				width:500px;
    			}
    			#box1{
    				transition: width 2s;/*设置过渡属性*/
    			}
    			
    		</style>
    	</head>
    	<body>		
    		<div id="box1">设置transition属性</div>		
    		<div id="box2">宽度变化直接完成</div>
    	</body>
    </html>

**案例思考：**

1、试一下改变元素的背景属性、或者改一下元素的透明度。

2、设置元素多个属性同时发生变化，过渡属性如何写？

3、完成以下效果：鼠标移上去以后，元素放大1.5倍，同时旋转90度，如何实现？推荐阅读：[HTML+CSS项目实践三：鼠标悬浮在图片上时，图片有一个简单动画效果（放大、旋转等）][HTML_CSS]

# 4、 CSS3 的动画属性 #

## **4.1  什么是动画？** ##

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，我们将形成连续性画面的任意一张图片称为桢或动画帧，它是构成动画的最小单元，CSS 中专门提供了创建动画帧的属性，并以此为基础在网页中创建动画。

![翻书动画][20201202212141480.gif]

## **`4.2  @keyframes` ** ##

@keyframes 是 CSS 中提供的专门用于定义动画关键帧的语法词。我们用它来创建动画，然后用 animation 属性来调用动画。

**使用步骤：**

*  第一步：@keyframes 用来定义动画序列。
    
     *  以百分比规定改变发生的时间，如 0 和 100%。0 是动画的开始时间，100% 是动画的结束时间。
     *  也可以通过关键词 from 和 to 定义，等价于 0 和 100% 。
 *  第二步：给想调用动画的元素，添加 animation 属性，用来为标签盒子引用动画序列，同一个动画序列可以被多个标签盒子引用。

![20201202213140705.gif][]

**实现代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>@keyframes-王迪 </title>
    		<style type="text/css">
    			div{/*设置div基本的样式*/
    				width: 200px;
    				height: 100px;
    				background-color: red;
    				margin: 10px;				
    			}
    			/*创建一个动画，名称自己起，这里叫move*/
    			@keyframes move{
    				from {/*设置动画从哪里开始*/
    					width: 100px;
    				}
    				to{/*设置动画到哪里结束*/
    					width: 300px;
    				}
    			}
    			#box1{
    				animation: move 3s infinite;/*使用animation属性,调用动画move*/
    			}
    			
    		</style>
    	</head>
    	<body>		
    		<div id="box1">设置循环播放动画</div>		
    		<div id="box2">对比用的div</div>
    	</body>
    </html>

## 4.3   animation 属性 ##

animation 属性是一个简写属性，用于设置六个动画属性：

<table style="width:593px;"> 
 <tbody> 
  <tr> 
   <th style="width:213px;">值</th> 
   <th style="width:377px;">描述</th> 
  </tr> 
  <tr> 
   <td style="width:213px;"><em><a href="http://www.w3school.com.cn/cssref/pr_animation-name.asp" rel="nofollow">animation-name</a></em></td> 
   <td style="width:377px;">规定需要绑定到选择器的 keyframe 名称。。</td> 
  </tr> 
  <tr> 
   <td style="width:213px;"><em><a href="http://www.w3school.com.cn/cssref/pr_animation-duration.asp" rel="nofollow">animation-duration</a></em></td> 
   <td style="width:377px;">规定完成动画所花费的时间，以秒或毫秒计。</td> 
  </tr> 
  <tr> 
   <td style="width:213px;"><em><a href="http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp" rel="nofollow">animation-timing-function</a></em></td> 
   <td style="width:377px;">规定动画的速度曲线。</td> 
  </tr> 
  <tr> 
   <td style="width:213px;"><em><a href="http://www.w3school.com.cn/cssref/pr_animation-delay.asp" rel="nofollow">animation-delay</a></em></td> 
   <td style="width:377px;">规定在动画开始之前的延迟。</td> 
  </tr> 
  <tr> 
   <td style="width:213px;"><em><a href="http://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp" rel="nofollow">animation-iteration-count</a></em></td> 
   <td style="width:377px;">规定动画应该播放的次数。</td> 
  </tr> 
  <tr> 
   <td style="width:213px;"><em><a href="http://www.w3school.com.cn/cssref/pr_animation-direction.asp" rel="nofollow">animation-direction</a></em></td> 
   <td style="width:377px;">规定是否应该轮流反向播放动画。</td> 
  </tr> 
 </tbody> 
</table>

**推荐阅读内容：**

[HTML+CSS项目实践一：单纯利用CSS制作图片轮播效果（不使用JS）][HTML_CSS_CSS_JS]

[HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）][HTML_CSS_CSS_JS 1]

# 5、CSS3新增的多列属性 #

CSS3 为文本排版增加了一种多列模式，如在一个 div 中实现文本左右分栏的效果。在实际开发中，因为浏览器的兼容性，有时还需要加上 -moz- 、-webkit-、 -o- 等前缀。

<table style="width:624px;"> 
 <tbody> 
  <tr> 
   <th style="width:172px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 属性</th> 
   <th style="width:233px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;描述</th> 
   <th style="width:237px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 属性值</th> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-count.html" rel="nofollow">column-count</a></td> 
   <td style="width:233px;">指定元素应该被分割的列数。</td> 
   <td style="width:237px;">数字/auto</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-fill.html" rel="nofollow">column-fill</a></td> 
   <td style="width:233px;">指定如何填充列</td> 
   <td style="width:237px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-gap.html" rel="nofollow">column-gap</a></td> 
   <td style="width:233px;">指定列与列之间的间隙</td> 
   <td style="width:237px;">长度/normal</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><strong><a href="https://www.runoob.com/cssref/css3-pr-column-rule.html" rel="nofollow">column-rule</a></strong></td> 
   <td style="width:233px;"><strong>所有 column-rule-* 属性的简写</strong></td> 
   <td style="width:237px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-rule-color.html" rel="nofollow">column-rule-color</a></td> 
   <td style="width:233px;">指定两列间边框的颜色</td> 
   <td style="width:237px;">颜色名/十六进制数/rgb函数</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-rule-style.html" rel="nofollow">column-rule-style</a></td> 
   <td style="width:233px;">指定两列间边框的样式</td> 
   <td style="width:237px;"> <p>none/hidden/dotted/dashed/solid/</p> <p>double/groove/ridge/inset/outset</p> </td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-rule-width.html" rel="nofollow">column-rule-width</a></td> 
   <td style="width:233px;">指定两列间边框的厚度</td> 
   <td style="width:237px;">thin/medium/thick/length</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-span.html" rel="nofollow">column-span</a></td> 
   <td style="width:233px;">指定元素要跨越多少列</td> 
   <td style="width:237px;">1/all</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><a href="https://www.runoob.com/cssref/css3-pr-column-width.html" rel="nofollow">column-width</a></td> 
   <td style="width:233px;">指定列的宽度</td> 
   <td style="width:237px;">长度/auto</td> 
  </tr> 
  <tr> 
   <td style="width:172px;"><strong><a href="https://www.runoob.com/cssref/css3-pr-columns.html" rel="nofollow">columns</a></strong></td> 
   <td style="width:233px;"><strong>column-width 与 column-count 的简写属性。</strong></td> 
   <td style="width:237px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**实现效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4][]

**关键代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS的多列属性-王迪</title>
    		<style type="text/css">
    			div{
    				width: 90%;
    				margin: 10px auto;
    				padding: 10px;
    				background-color: pink;
    				column-count: 3;/*将内容分成3列*/
    				column-rule-style: dashed;/*设置列之间,间隔的样式*/
    				column-rule-color: darkcyan;/*设置列之间,间隔的颜色*/
    				column-gap: 5%;/*设置列之间,的间隔*/
    			}
    			h1 {
    				column-span: all;/*设置元素应该横跨的列数，属性值，只能是 1 或者 all*/
    				text-align: center;
    			}
    			p:nth-of-type(n+2){/*这个选择器的作用,选择p元素，第二个以后的所有p元素*/
    				text-indent: 2em;/*设置段落首行缩进2个字符*/
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div>
    			<h1>给大学生的推荐阅读：《李开复给女儿的一封信》</h1>
    			<p>亲爱的女儿：</p>
    			<p>我想写一封信给你，告诉你盘旋在我脑中的想法。我想告诉你我们为你感到特别骄傲。进入哥伦比亚大学证明你是一个全面发展的优秀学生。</p>
    			<p>大学将是你人生最重要的时光，在大学里你会发现学习的真谛。我希望你理解，最重要的不是你学到的具体的知识，而是你学习新事物和解决新问题的能力。大学学习的真正意义是，你从被动学习转向自主学习的阶段，之后你会变成一个很好的自学者。就算学习的技能你会忘记，学习的能力是你将受用终身的。</p>
    			<p>不要被教条所束缚，任何问题都没有一个唯一的简单的答案。还记得当我帮助你准备高中的辩论课程时，我总是让你站在你不认可的那一方来辩论吗？我这么做的理由就是希望你能够理解：看待一个问题不应该非黑即白，而是有很多方法和角度。这就是“批判的思维”——你需要包容和支持不同于你的其他观点。我永远记得我去找我的博士导师提出了一个新论题，他告诉我：“我不同意你，但我支持你。”多年后，我认识到这不仅仅是包容，而是一种批判式思考，更是令人折服的领导风格，现在这也变成了我的一部分。我希望这也能成为你的一部分。</p>
    			<p>在大学里你要追随自己的激情和兴趣，选你感兴趣的课程，不要困扰于别人怎么说或怎么想。史蒂夫•乔布斯在他著名的斯坦福毕业典礼演讲中，提到一个例子：他在大学里修了看似毫无用处的书法，而十年后，这成了苹果Macintosh里漂亮字库的基础，然后才带来了桌面出版和今天的办公软件（例如微软Office）。他对书法的探索就是一个点，而苹果Macintosh把多个点串结成了一条线。</p>
    			<p>在功课上要尽力，但不要给自己太多压力。你妈妈和我在成绩上对你没什么要求，最重要的是你在学习，你需要的唯一衡量标准是你的努力程度。成绩只不过是虚荣的人用以吹嘘和慵懒的人所恐惧的无聊数字而已，而你既不虚荣也不慵懒。</p>
    			<p>最重要的是在大学里你要交一些朋友，大学的朋友往往是生命中最好的朋友，因为在大学里你和朋友能够近距离交往。另外，在一块儿成长，一起独立，很自然地你们就会紧紧地系在一起，成为密友。不用太在乎他们的爱好、成绩、外表甚至性格。你要以最大的善意去对人，不要有成见，要宽容。只要他们很真诚，就信任他们，对他们友善。他们将给你相同的回报，这是我成功的秘密——以诚待人，信任他人。有人告诉我这样有时我会被占便宜，他们是对的，但是我可以告诉你：以诚待人让我得到的远远超过我失去的。在我做管理的18年里，我学到一件很重要的事——要想得到他人的信任和尊重，只有先去信任和尊重他人。无论是管理、工作、交友，这点都值得你参考。</p>
    			<p>不管是暑假计划，功课规划，抑或是选专业，管理时间，你都应该为自己的人生负责。我仍然会一直站在你身旁，但是现在是你自己掌舵的时候了。我常常记起我生命中那些令人振奋的时刻——在幼儿园决定跳级，决定转到计算机科学专业，决定离开学术界选择Apple，决定回中国，决定选择Google，乃至最近选择创办我的新公司。生命太短暂了，你不能过别人想要你过的生活。掌控自己的生命是很棒的感觉，试试吧！</p>
    			<p>亲爱的女儿，珍惜你的大学时光吧，好好利用你的空闲时间，成为掌握自己命运的独立思考者。希望在哥伦比亚大学的时光成为你一生中最快乐的四年，希望你成为你梦想成为的人！
    		</div>
    	</body>
    </html>

===========这里是结束分割线=============

[HTML5_Web_CSS3]: https://blog.csdn.net/dnruanjian/article/details/109535784
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70]: /images/20221120/ba142f90718b4df29dfb049eefab27a9.png
[20201128195547617.gif]: /images/20221120/dd677983e71c4d05a39d50132ec8373e.png
[Link 1]: https://blog.csdn.net/dnruanjian/article/details/109527391
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1]: /images/20221120/6164d7b45cbf4eac9ff4bf9d673d219f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2]: /images/20221120/08c0ac1d38dd4b24b520c7ee8e6a3f32.png
[20201128190125135.gif]: /images/20221120/94245d6951224031bde5edcd64a7c73e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3]: /images/20221120/9bacb6d9f7da472cbebc381d2b2859d9.png
[20201128213217466.png]: /images/20221120/fca6af4ef2bf4cc48646d018325b50b1.png
[20201202204350889.gif]: /images/20221120/0edfbe3575d648368454df5b091a30e8.png
[HTML_CSS]: https://blog.csdn.net/dnruanjian/article/details/85124872
[20201202212141480.gif]: /images/20221120/48ae53146ecc4b4fa8b27952a0839254.png
[20201202213140705.gif]: /images/20221120/7eac78b99cbb42468e7699a38a368057.png
[HTML_CSS_CSS_JS]: https://blog.csdn.net/dnruanjian/article/details/85100033
[HTML_CSS_CSS_JS 1]: https://blog.csdn.net/dnruanjian/article/details/85265743
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4]: /images/20221120/d10667865d0342a6b859bd89950e9565.png