CSS3基础知识总结

一、CSS3 边框

1.border-radius：圆角边框

2.box-shadow：添加阴影

3.border-image：图片边框

二、CSS3 渐变

1.线性渐变(Linear Gradients)

a.由上到下（默认）

b.从左到右

c.对角

d.使用角度

2.径向渐变(Radial Gradients)

a.颜色节点均匀分布（默认）

b.颜色节点不均匀分布

c.设置形状

d.使用不同尺寸大小的关键字

e.重复径向渐变

三、CSS3 2D转换

1.translate()方法

2.rotate()方法

3.scale()方法

4.skew()方法

5.matrix()方法

四、CSS3 3D转换

1.3D转换方法

2.转换属性

五、CSS3 过渡

六、CSS3 动画

1.动画属性

七、CSS3 多列

1.多列属性

八、CSS3 用户界面

1.resize:调整尺寸

2.box-sizing:方框大小调整

3.outline-offset:外形修饰

九、CSS3 弹性盒子

1.弹性盒子属性

a.display

b.flex-direction

c.justify-content

d.align-items

e.flex-wrap

f.align-content

g.order

h.align-self

I.flex

十、示例代码

一、CSS3 边框

1.border-radius：圆角边框

属性值	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

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

2.box-shadow：添加阴影

div {
	box-shadow: 10px 10px 10px gray;
}

3.border-image：图片边框

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 */
}

二、CSS3 渐变

1.线性渐变(Linear Gradients)

a.由上到下（默认）

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

b.从左到右

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

c.对角

/*从左上角到右下角*/
.grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

d.使用角度

.grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

2.径向渐变(Radial Gradients)

a.颜色节点均匀分布（默认）

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

b.颜色节点不均匀分布

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

c.设置形状

/*circle:表示圆形，ellipse:表示椭圆形，默认*/
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

d.使用不同尺寸大小的关键字

closest-side
farthest-side
closest-corner
farthest-corner

#grad {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, green);
}

e.重复径向渐变

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

三、CSS3 2D转换

注意： Chrome 和 Safari 要求前缀 -webkit- 版本. Internet Explorer 9 要求前缀 -ms- 版本.

2D转换方法：

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
*rotate(angle)*	定义 2D 旋转，在参数中规定角度。
*skew(x-angle,y-angle)*	定义 2D 倾斜转换，沿着 X 和 Y 轴。
*skewX(angle)*	定义 2D 倾斜转换，沿着 X 轴。
*skewY(angle)*	定义 2D 倾斜转换，沿着 Y 轴。

1.translate()方法

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

div {
    transform: translate(50px,100px);   /*从左边元素移动50个像素，并从顶部移动100像素*/
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

2.rotate()方法

在一个给定度数顺时针旋转的元素。

div {
    transform: rotate(30deg);  /*顺时针旋转30度，负数代表逆时针*/
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

3.scale()方法

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

div{
    transform: scale(2,3);     /*宽度为原来的2倍，高度为原来的3倍*/
}

4.skew()方法

语法：transform:skew(<angle> [,<angle>]);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

div {
    transform: skew(30deg,20deg);    /*沿X轴倾斜30度，并沿Y轴倾斜20度*/
}

5.matrix()方法

关于matrix的6个参数的具体作用：

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

scaleX() (水平缩放)：控制元素水平方向的缩放。如果值为 1，则不进行水平缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。

skewY() (垂直倾斜)：控制元素在垂直方向上的倾斜。

skewX() (水平倾斜)：控制元素在水平方向上的倾斜。

scaleY() (垂直缩放)：控制元素垂直方向的缩放。如果值为 1，则不进行垂直缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。

translateX() (水平平移)：控制元素在水平方向上的平移量。

translateY() (垂直平移)：控制元素在垂直方向上的平移量。

即在不变换的情况下是 matrix(1,0,0,1,0,0)。

div {
    transform:matrix(0.6,0.5,-0.5,0.6,0,0);
}

四、CSS3 3D转换

2D和3D转换很相似，这里不再特别展示代码，下面列出具体的3D转换方法。

1.3D转换方法

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
*rotate3d(x,y,z,angle)*	定义 3D 旋转。
*rotateX(angle)*	定义沿 X 轴的 3D 旋转。
*rotateY(angle)*	定义沿 Y 轴的 3D 旋转。
*rotateZ(angle)*	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

2.转换属性

属性值	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

五、CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

属性值	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

/*也可以简写成下面*/
div {
    transition: width 1s linear 2s;
}

六、CSS3 动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

可以使用百分比或关键词 "from" 和 "to"（等同于 0% 和 100%）来规定变化发生的时间。

0% 是动画的开始，100% 是动画的完成。

@keyframes用于创建动画，需要将动画效果绑定到一个选择器上。

<style>

    @keyframes swing{
        0%   {
            background: red; left:0px; top:0px;
        }
        25%  {
            background: yellow; left:200px; top:0px;
        }
        50%  {
            background: blue; left:200px; top:200px;
        }
        75%  {
            background: green; left:0px; top:200px;
        }
        100% {
            background: red; left:0px; top:0px;
        }
    }

      div {
	    width:100px;
	    height:100px;
	    position:relative;
	    animation:swing 5s;    /*把"swing"动画捆绑到div元素，耗时5s*/
	    -webkit-animation:swing 5s; /* Safari and Chrome */
    }


</style>