CSS3常用知识点梳理

CSS3中新特性样式篇

背景

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

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


background-clip：  	 规定背景的绘制区域。
	☞ border-box	 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
	☞ padding-box	 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】
	☞ content-box	 背景被裁切到内容区域【将背景图片在内容区域显示】
    应用:
	    1.移动端开发图片裁切到内容区域，左右添加padding使可点击区域变大。

background-size：     规定背景图片的尺寸。
	☞ cover
	☞ contain

边框

 box-shadow：10px,10px,10px，red;      盒子阴影
 四个参数代表的意思
 1.阴影水平偏移量，正右负左
 2.阴影垂直偏移量，正下负上
 3.阴影模糊度，不能为负。
 4.阴影颜色。
 border-radius：   边框圆角
 border-image:	  边框图片

	 
			 /* 设置边框图片 */
			 border-image-source: url("2.png");

			 /* 边框图片裁切 : 不需要带单位*/
			 border-image-slice: 20;

			 /* 设置边框图片的平铺方式 */
			 /* border-image-repeat: stretch; */
			 border-image-repeat: round;
			/*  border-image-repeat: repeat; */

			border-image-width: 20px;

文本

  ☞text-shadow： 设置文本阴影	同box-shadow	

CSS3新特性之选择器篇

☞ 属性选择器： 
    	[属性名=值] {}  div[class="selected"]	
    	[属性名] {}	   匹配对应的属性即可  div[class] 
		[属性名^=值] {}    以值开头
		[属性名*=值] {}    包含
		[属性名$=值] {}	   以值结束
	
☞ 结构伪类选择器：
	  :first-child {}     选中父元素中第一个子元素 必须是父元素中第一个元素
	  :last-child {}	  选中父元素中最后一个子元素 必须是父元素中最后一个才会被选中
	  :nth-child(n) {}    选中父元素中正数第n个子元素
	  :nth-last-child(n) {}    选中父元素中倒数第n个子元素
	  :first-of-type {}    选中指定类型元素的第一个
      :last-of-type {}      选中指定类型元素的最后一个
      :nth-of-type(n) {}    选中指定类型元素第n个元素

	  备注；
		 n 的取值大于等于0
	     n 可以设置预定义的值
			odd[选中奇数位置的元素]  
			even【选中偶数位置的元素】

	     n 可以是一个表达式：
			 an+b的格式
☞ 伪元素选择器：
 ::before:在元素内部的前面插入内容
 ::after:在元素内部的后面插入内容
 1.before和after必须有content属性
 2.before和after创建了一个行内元素
 3.dom结构中幷不显示
☞ 其他选择器：
	:target          被锚链接指向的时候会触发该选择器
	::selection	     当被鼠标选中的时候的样式
	::first-line	 选中第一行
	::first-letter	 选中第一个字符
	word-break:break-all;换行
		类选择器、属性选择器、伪类选择器的权重值均为10
伪类和伪元素的区别？
伪类是选择器，伪元素是页面中用css代码实现的元素。

CSS3新特性之颜色渐变

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

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

	备注：
	 	表示方向：
			 1. to + right | top | bottom | left 
			 2. 通过角度表示一个方向
			   0deg [从下向上渐变] 
			   90deg【从左向右】
  
  ☞ 径向渐变：
		   /* 径向渐变 */
			background-image: radial-gradient(
				 100px at center,
				 red,
				 blue
			);

2D转换

  ☞ 位移
	  1. transform: translate(100px,100px);X轴和Y轴方向移动
	  2. transform: translateX(100px);X轴方向移动
	  3. transform: translateY(100px);Y轴方向移动
		
	   备注：
	 	   1.位移是相对元素自身的位置发生位置改变，不会影响其他元素位置
	 	   2.translate(百分比)表示平移盒子宽度的百分比



  ☞ 旋转
		transform: rotate(60deg);
	   备注：
		   取值为角度，正数为顺时针，负数为逆时针。
		transform-origin:x y;
		备注：1.x和y默认为元素的中心点（50% 50%）（center center）
			 2.x y 可以是像素，也可以是方位（top bottom left right center）
		
  ☞ 缩放
	    transform: scale(0.5,1);
		备注：
			 1.取值为倍数关系，缩小大于0小于1，放大设置大于1
			 2.默认以中心缩放，也可用transform-origin改变缩放中心。对其他元素无影响
	
  ☞ 倾斜
	   transform: skew(30deg,30deg);
   	   备注：
		  第一个值代表沿着x轴方向倾斜
		  第二个值代表沿着y轴方向倾斜
备注：多个2D效果可以组合在一起使用，如transform：translate()  rotate() scale() 顺序不同，效果也可能不同

3D转换

  ☞ 位移
	transform: translateX()  translateY()   translateZ()

  ☞ 旋转
	 transform: rotateX(60deg)  rotateY(60deg)  rotateZ(60deg);

  ☞ 缩放
	  transform: scaleX(0.5)  scaleY(1)  scaleZ(1);
  ☞ 倾斜
      transform: skewX(30deg) skewY();
  ☞ perspective:500px;
	开启透视效果,给元素的父元素添加，近大远小
  ☞ transform-style: preserve-3d;
	开启子元素的3D效果

CSS3新特性之动画篇

动画
	1.定义动画集
		@keyframes  rotate {

			/* 定义开始状态  0%*/
			from {
				transform: rotateZ(0deg);
			}

			/* 结束状态 100%*/
			to {
			   transform: rotateZ(360deg);
			}
		}
	2.元素使用动画
		animation-name:动画名称;
		animation-duration:持续时间;
		animation-timing-function:运动曲线;
		animation-delay:延迟时间;
		animation-iteration-count:重复次数; infinite无限循环
		animation-direction:是否反方向运动;默认normal 反方向alternate
		animation-fill-mode:动画结束回到起始状态;默认backward 停留在结束状态 forwards
		animation-play-state:暂停动画; 默认running 暂停 paused
	3.动画简写
		animation:动画名称（必写） 持续时间（必写） 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

    注意：
		 1. 如果设置动画集使用的是百分比，那么记住百分比是相对整个动画执行时间的。
		 2.animation-timing-function:默认值为ease 先低速开始，然后加快，在结束前变慢。
		 还有：linear 匀速
 			   ease-in 低速开始
 			   ease-out 低速结束
 			   ease-in-out 低俗开始和结束
 			   steps 按几步完成
 			   



 补间动画

			/* 设置哪些属性要参与到过渡动画效果中： all */
			transition-property: all;

			/* 设置过渡执行时间 */
			
			transition-duration: 1s;

			/* 设置过渡延时执行时间 */
			transition-delay: 1s;

			/* 设置过渡的速度类型 */

			transition-timing-function: linear;

CSS3新特性之网页布局篇

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

  ☞ 设置父元素为伸缩盒子【直接父元素】
	    display： flex
	
      为什么在伸缩盒子中，子元素会在一行上显示？
			 1. 子元素是按照伸缩盒子中主轴方向显示
			 2. 只有伸缩盒子才有主轴和侧轴
			 3. 主轴： 默认水平从左向右显示
			 4。 侧轴： 始终要垂直于主轴

  ☞ 设置伸缩盒子主轴方向（flex-direction）
		   	flex-direction: row; 【默认值】
			flex-direction: row-reverse;
			flex-direction: column;
			flex-direction: column-reverse;
  ☞ 设置元素在主轴的对齐方式( justify-content)
		/* 设置子元素在主轴方向的对齐方式 */
			justify-content: flex-start;
			justify-content: flex-end;
			justify-content: center;
			justify-content: space-between;
			justify-content: space-around;

  ☞ 设置元素在侧轴的对齐方式 （align-items）
			align-items: flex-start;
			align-items: flex-end;
			align-items: center;

			/* 默认值 */
			align-items: stretch;

  ☞ 设置元素是否换行显示（flex-wrap）
		  1. 在伸缩盒子中所有的元素默认都会在一行上显示
		  2. 如果希望换行：
			flex-wrap: wrap | nowrap;

  ☞ 设置元素换行后的对齐方式（ align-content）
		    align-content: flex-start;
			align-content: flex-end;
			align-content: center;
			align-content: space-around;
			align-content: space-between;
			/* 换行后的默认值 */
			align-content: stretch;