CSS3

一、CSS3中新特性样式篇

1.1 背景

1.1.1 background-origin： 规定背景图片的定位区域。

padding-box 背景图像相对内边距定位（默认值）
border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】
content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

备注：默认盒子的背景图片是在盒子的内边距左上角对齐设置

1.1.2 background-clip： 规定背景的绘制区域。

border-box 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
padding-box 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
content-box 背景被裁切到内容区域【将背景图片在内容区域显示】

1.1.3 background-size： 规定背景图片的尺寸。

cover
contain

1.2 边框

box-shadow： 盒子阴影
border-radius： 边框圆角
border-image: 边框图片
border-image-source: url(“2.png”); //设置边框图片
border-image-slice: 20; //边框图片裁切 : 不需要带单位
border-image-repeat: stretch | round | repeat; //设置边框图片的平铺方式
border-image- 20px;

1.3 文本

text-shadow： 设置文本阴影

二、CSS3新特性之选择器篇

2.1 属性选择器：

[属性名=值] {}
[属性名] {} 匹配对应的属性即可
[属性名^=值] {} 以值开头
[属性名*=值] {} 包含
[属性名$=值] {} 以值结束

2.2 结构伪类选择器：

:first-child {}     选中父元素中第一个子元素
:last-child {}	  选中父元素中最后一个子元素
:nth-child(n) {}    选中父元素中正数第n个子元素
:nth-last-child(n) {}    选中父元素中倒数第n个子元素

备注；n 的取值大于等于0l可以设置预定义的值;可以是一个表达式(an+b的格式)
odd[选中奇数位置的元素]
even【选中偶数位置的元素】

2.3 其他选择器：

:target          被锚链接指向的时候会触发该选择器
::selection	     当被鼠标选中的时候的样式
::first-line	   选中第一行
::first-letter	 选中第一个字符

三、CSS3新特性之颜色渐变

3.1 线性渐变：

1. 开始颜色和结束颜色
2. 渐变的方向
3. 渐变的范围

background-image:  linear-gradient(to right, red, blue);

表示方向：

1. to + right | top | bottom | left
2. 通过角度表示一个方向: 0deg [从下向上渐变] ; 90deg【从左向右】

3.2 径向渐变：

background-image: radial-gradient(100px at center, red, blue);

四、2D转换

4.1 位移

transform: translate(100px,100px);

备注：位移是相对元素自身的位置发生位置改变

4.2 旋转

transform: rotate(60deg);

备注：取值为角度

4.3 缩放

transform: scale(0.5,1);

备注：取值为倍数关系，缩小大于0小于1，放大设置大于1

4.4 倾斜

transform: skew(30deg,30deg);

备注：第一个值代表沿着x轴方向倾斜,第二个值代表沿着y轴方向倾斜

五、3D转换

5.1 位移

transform: translateX()  translateY()   translateZ()

5.2 旋转

transform: rotateX(60deg)  rotateY(60deg)  rotateZ(60deg);

5.3 缩放

transform: scaleX(0.5)  scaleY(1)  scaleZ(1);

5.4 倾斜

transform: skewX(30deg) skewY();

5.5 将平面图形转换为立体图形

transform-style: preserve-3d;

六、CSS3新特性之动画篇

https://www.cnblogs.com/afighter/p/5731293.html

6.1 过渡

transition-property: all;						//设置哪些属性要参与到过渡动画效果中： all 
transition-duration: 1s;						//设置过渡执行时间
transition-delay: 1s;								//设置过渡延时执行时间
transition-timing-function: linear;	//设置过渡的速度类型

6.2 动画

/* 1定义动画集 */
@keyframes  rotate {
    /* 定义开始状态  0%*/
    from {
        transform: rotateZ(0deg);
    }
    /* 结束状态 100%*/
    to {
        transform: rotateZ(360deg);
    }
}

注意：如果设置动画集使用的是百分比，那么记住百分比是相对整个动画执行时间的。

七、CSS3新特性之网页布局篇

伸缩布局或者弹性布局【响应式布局】

7.1 设置父元素为伸缩盒子【直接父元素】

display： flex

为什么在伸缩盒子中，子元素会在一行上显示？

1. 子元素是按照伸缩盒子中主轴方向显示
2. 只有伸缩盒子才有主轴和侧轴
3. 主轴： 默认水平从左向右显示
4. 侧轴： 始终要垂直于主轴

7.1.1 设置伸缩盒子主轴方向（flex-direction）

flex-direction: row; 【默认值】
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

7.1.2 设置元素在主轴的对齐方式( justify-content)

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

7.1.3 设置元素在侧轴的对齐方式 （align-items）

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;	/* 默认值 */

7.1.4 设置元素是否换行显示（flex-wrap）

在伸缩盒子中所有的元素默认都会在一行上显示,如果希望换行

flex-wrap: wrap | nowrap;

7.1.5 设置元素换行后的对齐方式（ align-content）

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
align-content: stretch;		///* 换行后的默认值 */