CSS进阶CSS3，初入前端必备技能之一

一、CSS3是什么？

对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。

最重要CSS3模块如下：

选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面

二、使用步骤

1.CSS3 边框

border-radius CSS3 圆角

div
{
border:2px solid;
border-radius:25px;
}

box-shadow CSS3 盒阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

border-image CSS3 边界图片

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

2.CSS3 背景

background-image属性
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-size 属性

div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

background-origin 属性
content-box, padding-box,和 border-box区域内可以放置背景图像

div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

background-clip属性
背景剪裁属性是从指定位置开始绘制

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

3.box-shadow

语法：box-shadow: h-shadow v-shadow blur spread color inset;

第一个 参数

.container {
  box-shadow: 0 0 0 1px blue;
}

4.渐变（Gradients）

两种类型的渐变（gradients）：

1. 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
2. 径向渐变（Radial Gradients）- 由它们的中心定义

使用属性：background-image 必须放在所有属性最后

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

从上到下（默认）：

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

从左到右：

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

对角：

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

使用角度：
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

background-image: linear-gradient(angle, color-stop1, color-stop2);
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

重复线性渐变：

#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变：

#grad {
  background-image: radial-gradient(red, yellow, green);
}

设置形状：

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

5.文本效果

文本阴影

h1
{
    text-shadow: 5px 5px 5px #FF0000;
}

6.字体

7.2D 转换

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
联合使用

div
{
transform: translate(50px,100px) rotate(45deg);
-ms-transform: translate(50px,100px) rotate(45deg); /* IE 9 */
-webkit-transform: translate(50px,100px) rotate(45deg); /* Safari and Chrome */
}

translate() 方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

skew() 方法

语法：

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

matrix() 方法 (丧心病狂)

matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

详解矩阵算法：

// 例子：
#transformedObject { 
position: absolute; 
left: 0px; 
top: 0px; 
width: 200px; 
height: 80px;
}

↓添加代码
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform-origin属性的时候起作用。

#transformedObject { 
position: absolute; 
left: 0px; 
top: 0px; 
width: 200px; 
height: 80px;
transform:matrix(0.9, -0.05, -0.375, 1.375, 220, 20);
transform-origin: 0 0;
}

过程详解：
matrix(0.9, -0.05, -0.375, 1.375, 220, 20)用矩阵表示

元素最初的每个顶点相当一个向量

变换后的四个点的坐标值，其实是matrix(0.9, -0.05, -0.375, 1.375, 220, 20)对应的矩阵与原始四个点对应的向量分别相乘而得，具体的运算过程如下图

8.3D 转换

9.过渡

指定要添加效果的CSS属性
指定效果的持续时间。

// 应用于宽度属性的过渡效果，时长为 2 秒
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

10.动画

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
    // 0%   {background: red;}
    // 25%  {background: yellow;}
    // 50%  {background: blue;}
    // 100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
    // 0%   {background: red;}
    // 25%  {background: yellow;}
    // 50%  {background: blue;}
    // 100% {background: green;}
}

// 规定动画的名称
// 规定动画的时长
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

总结

good afternoon