【融职培训】Web前端学习 第2章 网页重构12 css3新增样式
【融职培训】Web前端学习 第2章 网页重构12 css3新增样式
一、css3新增属性概述
在此前我们讲解的css课程中，课程内容是以css2版本为基础的，本章开始我们讲解css3版本的新特性。
在css2的时代，由于css的功能局限性，我们制作的很多网页效果都是利用一些取巧的方法，例如实现一个圆角的页面，我们需要把圆角的部分用图片代替，而制作动画效果，都需要使用JavaScript来完成的，这不仅增加了代码编写的难度，还降低了web开发人员的工作效率。
在css3中我们可以使用大量新增的属性，例如圆角，阴影，动画，形变等等，这让web开发便得更加简单。
二、圆角
通过border-radius属性，我们可以为一个元素设置圆角，代码如下所示。
1 .box{
2 width:200px;
3 height:200px;
4 border:1px solid red;
5 border-radius: 10px;
6 }在上面的代码中，我们为一个宽度和高度都是200px的div设置了一个圆角效果，border-radius的值是圆角的半径。
我们可以将圆角的半径设置为50%，这样一个正方形的div元素就变成了一个圆形，如果是长方形的元素，就会变成椭圆形。
1 .box {
2 width: 200px;
3 height: 200px;
4 border: 1px solid red;
5 border-radius: 50%;
6 }可以使用四个值分别指定元素四个角的圆角半径，代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 border: 1px solid red;
5 border-radius: 10px 20px 30px 40px;
6 }通过上面的代码，可以直观地看出，圆角设置的四个值分别对应的是左上，右上，右下，左下。
三、阴影
通过box-shadow属性，我们可以设置元素的阴影，代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 border: 1px solid red;
5 box-shadow: 10px 20px 10px blue;
6 }从上面的代码我们可以看到box-shadow属性可以设置四个值，第一个值是阴影x轴的长度，第二个值是阴影y轴的长度，第三个值是阴影的模糊半径，第四个值是阴影的颜色。
四、形变
css3提供了让元素形变的属性(transform)，在transform后面添加不同的形变函数，就能实现不同的形变效果，常用的形变包括：旋转、缩放、位移；
旋转
通过rotate()函数可以实现元素形变的效果，示例代码如下所示。
1 .box{
2 width:200px;
3 height:200px;
4 margin:100px auto;
5 transform: rotate(45deg);
6 background-color: #00f;
7 }在上面的代码中，我们通过rotate函数让元素顺时针旋转了45度（deg单位表示度）。我们也可以设置负的度数，例如：
1 .box{
2 transform: rotate(-45deg);
3 }上面的代码可以让元素逆时针旋转45度。
缩放
通过scale()函数可以实现元素的缩放，示例代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 margin: 100px auto;
5 transform: scale(1.5);
6 background-color: #00f;
7 }我们可以在scale函数中设置元素缩放的比例，1.5就是原基础之上1.5倍，原宽高是200px，缩放之后呈现出来的尺寸就是300px。
位移
通过translate()函数可以实现元素的位移，示例代码如下所示。
1 .box {
2 width: 200px;
3 height: 200px;
4 margin: 100px auto;
5 transform: translate(100px,200px);
6 background-color: #00f;
7 }在translate()函数中，我们可以设置元素位移的x轴距离和y轴偏移量。
我们可以利用位移，将元素放置在页面水平和垂直居中的位置，代码如下所示
1 .box {
2 width: 200px;
3 height: 200px;
4 position: absolute;
5 top:50%;
6 left:50%;
7 transform: translate(-50%, -50%);
8 background-color: #00f;
9 }这样通过绝对定位，配合位移，就可以将元素放置在水平和垂直都居中的位置上了。
五、课后练习
按要求完成案例，要求如下
- 让一个蓝色的正圆垂直水平居中显示。
- 正圆的直径为100px。
- 阴影距离正圆偏离10px。