CSS3

概述

• c3兼容性很差，需要添加私有前缀
• 渐进增强原则，保证低版本正常运行，高版本效果更好。

    工具：
        []		表示全部可选项  padding
        ||		表示或者    
        |		表示多选一
        ？	    表示0个或者1个
        *		表示0个或者多个
        {}		表示范围

选择器

之前选择器拓展

div+p：选中div后面相邻的第一个p，必须紧挨着div，中间不能有其他的标签
div~p:选中div后边所有的p标签

属性选择器

标志性符号：[]
^:开头  $:结尾  *:包含
	div[class^="aa"],div带有class属性，并且值以aa开头
	div[class$="aa"],div带有class属性，并且值以aa结尾
	div[class*="aa"],div带有class属性，并且值包含aa
E[class] 选中页面的E元素，并且E元素中有class属性
div[class="box"],div带有class属性，并且值为box

结构伪类选择器

通过结构进行筛选
E:first-child/last-child/nth-child()/nth-last-child()
	先找父元素，再找里面指定的标签
	E:nth-child(1),编号是从1开始的
	E:nth-child(n);n>=0,当n小于1时无效，2n/even/偶数，2n+1/odd/奇数，-n+5/选中前5个
	所选到的元素类型，必须时指定的类型E否则无效
E：empty
	如果E是空的时候会被选中，表示元素是空的状态
E:target
	要配合锚点使用，表示被激活的状态

伪元素选择器

标志性符号：双冒号（：：）
伪元素
	::before/::after
		通过css模拟出来html标签的效果
		是一个行内元素，需要转换成块元素
		创建必须要有content：“”；属性
伪元素选择器
	::first-letter
		选中第一个字母
		首字下沉需要和float一起使用
	::first-line
		选中第一行
	::selection
		表示当前选中的区域
		通常设置color，background

伪类选择器（css2）

标志性符号：冒号
代表一种状态
:hover  :link  :active  :visited (lvha)

颜色和透明度

css2中的透明度
	opacity
		可以给盒子设置半透明，但是会影响里面的子盒子，并且里面的子盒子无法改变透明度（继承性）
	transparent
		可以单独设置透明度，但是无法改变透明度的值，是全透明的
rgba（）
hsla（）
	h:色调 0-360
	s:饱和度 0%-100%
	l:亮度 0%-100%
	a:alpha 透明度 0-1

文字阴影

text-shadow:水平位移 垂直位移 模糊程度 阴影颜色
	有多个阴影效果，并列书写，使用逗号隔开

盒子模型

box-sizing:
	content-box 外加模式（默认值）
	padding-box
	border-box  内减模式

浏览器私有化前缀

-webkit-:谷歌 苹果
-moz-:火狐
-ms-:ie
-o-:欧朋
主要用于处理浏览器兼容性问题

边框

边框圆角

border-radius:
	写法
		单个属性：水平半径 垂直半径
		复合写法：水平半径..../垂直半径....
	赋值顺序
		从左上角开始，顺时针赋值，如果当前角没有值，取对角值

盒子阴影

box-shadow:水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 内外阴影
	内阴影（inset）,外阴影不用写

边框图片

属性
	边框图片的路径
		border-image-sourse:url();
	边框图片的剪裁
		border-image-slice:27 27 27 27;/27;
		顺时针剪裁
	边框图片的大小
		border-image-width:
	边框图片的平铺
		border-image-repeat:
			repeat 正常平铺，但是可能会显示不完整
			round 平铺 保持图片完整
			stretch 拉伸（默认值）
谷歌高版本可能会不支持

渐变

渐变属于背景图片范围属性，background-image:
线性渐变
	linear-gradient(方向，起始颜色 0%，终止颜色 100%)
		方向
			to left/right/top/bottom
			角度：30deg
			默认方向是从上向下
		可以用百分制控制颜色的范围:red 20%
径向渐变
	radial-gradient(辐射半径，中心点位置，起始颜色 0%，终止颜色 100%)
		辐射半径
			通过控制x，y轴值来控制圆或者椭圆
		中心点位置
			at center/left/right/top/bottom/数值（x，y）px

背景

背景尺寸

background-size:
	数值：水平数值 垂直数值
	百分比：水平 垂直
	cover 覆盖
		会保证完全覆盖盒子，但不能保证完全显示，全背景 自适应
	contain 包含
		保证背景图片最大化在盒子中等比例显示，但不能保证铺满整个盒子
控制背景大小

背景原点

background-origin:
	content-box
	padding-box 默认值
	border-box
控制背景从什么地方显示

背景剪裁

background-clip:
	content-box
	padding-box
	border-box
表示从什么位置开始剪裁

多背景

按照背景正常的语法格式书写，多个背景中间用逗号隔开

过渡

transiton：过渡属性 持续时间 运动曲线 延迟时间
	过渡属性
		transition-property:width;
	过渡时间
		transition-duration:4s;
	运动曲线
		transition-timing-function:
			linear 线性
			ease 减速
			ease-in 加速
			ease-out 减速
			ease-in-out 先加速后减速
如果希望所有的属性都发生过渡使用all
过渡必须加给过渡盒子本身，谁过渡加给谁

2D转换

transform:
	放缩
		scale(水平缩放比例，垂直缩放比例)
		如果只写一个值，等比例缩放
		不能使用百分比
	位移
		translate（水平位移，垂直位移）
		如果只写一个值 水平移动
		百分比是相对于自身的移动，50%
	旋转
		rotate(角度)
			正值是顺时针
	倾斜
		skew(相对于x轴的偏移，相对于y轴的偏移)
变换中心
	translate-origin:水平坐标 垂直坐标
		left right center top bottom
	变换中心 默认是图片的几何中心
复合写法中间用空格隔开

3D变换

旋转
	rotateX()
	rotateY()
	rotateZ()
	所有的3D旋转，对着正方向去看都是顺时针旋转
位移
	translateX()
	translateY()
	translateZ()
	Z轴方向必须配合透视来使用
透视
	perspective: 
		设置的是用户的眼睛和屏幕的距离，透视效果只是视觉上的呈现，不是真正的3D
		加给变换的父盒子
3D效果呈现
	transform-style:
		preserve-3d
			可以让里面的子盒子保持3D效果  加给父盒子 让子盒子位于3D空间
		flat 子盒子被扁平化
backface-visibility:hidden;背面不可见

动画

类似js中的函数，先定义再调用
定义动画
	@keyframes 动画名{  0%{ }  100%{  }或者 from{ }to{  }  }
调用
	animation:动画名称 持续时间 执行次数 延迟时间 是否反向 运动曲线 结束后状态
		动画名称
			animation-name:
		持续时间
			animation-duration:
				秒数：2s
		执行次数
			animation-iteration-count:
				数字
				infinite 无限次
			持续时间
				animation-duration:
					秒数：2s
		延迟时间
			animation-delay:
				秒数：2s
		运动曲线
			animation-timing-function:
				linear 线性
				ease 减速
				ease-in 加速
				ease-out 减速
				ease-in-out 先加速后减速
				steps（）分步
		是否反向
			animation-direction:
				normal
				alternate 反向
		结束状态
			animation-fill-mode:
				forwards 保持动画结束后的状态
				backwards 初始状态
	动画的前两个属性是必须有的，并且顺序固定
控制动画状态
	animation-play-state:
		paused 停止
		running 播放

多列布局

column-count:3;分几列
column-rule:1px solid red; 分割线
column-gap:60px; 列间距
column-width: ；列宽度
column-span:all;跨列，all表示跨所有的列
注意：兼容性

伸缩布局

display:flex;
主轴方向 flex-direction
	 row 水平
	row-reverse 水平翻转
	column 列
	column-reverse 列翻转
主轴的对齐方式 justify-content
	flex-start 从主轴的开始的方向对齐
	flex-end 从主轴结束的方向对齐
	center 居中对齐
	space-round 平分对齐
	space-between 两端对齐
侧轴的对齐方式 align-items
	flex-start 从侧轴开始的方向对齐
	flex-end 从侧轴结束的方向对齐
	center 居中对齐
	baseline 基线对齐
	stretch 拉伸
伸缩比例 flex:数字
	如果盒子不参与划分比例，不写flex属性即可

web字体

步骤
	引入字体包
	声明字体，告诉浏览器去哪里找这个字体
	给盒子添加这个字体
	在伪元素中，content:""中使用图标的编码时要删除前面的符号，然后加\,起转义作用

360案例

window.onmousewheel 鼠标滚动事件
jquery全屏滚动事件fullpage.js

兼容性

通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题

转载于:https://my.oschina.net/u/3160839/blog/1831217