CSS备忘录

CSS 及CSS3 样式

1.text-shadow 文本阴影

 text-shadow: 5px 5px 5px #FF0000;

2.box-shadow 盒子阴影

box-shadow: 10px 10px 5px #888888;

 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 卡片效果
  box-shadow 的顺序依次为:
 h-shadow   v-shadow   blur   spread   color   insect
水平阴影    垂直阴影   模糊    阴影尺寸  颜色   外阴影转到内阴影 

3.text-overflow 文本溢出

width: 200px;
text-overflow: clip|ellipsis|string;   //文本溢出 如何显示溢出内容
	clip //	修剪文本
	ellipsis //显示省略符号来代表被修剪的文本
	string //使用给定的字符串来代表被修剪的文本
	
.ellipsis{  //常用方法  文字内容超过宽度 变...
	white-space:nowrap;  //不换行
	overflow:hidden; 
	width:100%;
	text-overflow:ellipsis
}

4.word-wrap 换行

word-wrap: normal|break-word;
	normal  只在允许的断字点换行（浏览器保持默认处理）。
	break-word   在长单词或 URL 地址内部进行换行。 允许长单词或 URL 地址换行到下一行

5.word-break换行

word-break: normal|break-all|keep-all;

值			描述
normal		使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

6.white-space 元素内的空白怎样处理

white-space:
	值			描述
	normal		默认。空白会被浏览器忽略。
	pre			空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
	nowrap		文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
	pre-wrap	保留空白符序列，但是正常地进行换行。
	pre-line	合并空白符序列，但是保留换行符。
	inherit		规定应该从父元素继承 white-space 属性的值。

7.text-align 文字对其方式

值			描述
left		把文本排列到左边。默认值：由浏览器决定。
right		把文本排列到右边。
center		把文本排列到中间。
justify		实现两端对齐文本效果。
inherit		规定应该从父元素继承 text-align 属性的值。

8. @font-face 引入指定字体

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
@font-face：
	描述符	    值	      描述
font-family	  name	    必需。规定字体的名称。
src	           URL	    必需。定义字体文件的 URL。
font-stretch            可选。定义如何拉伸字体。默认是 "normal"。
			normal
			condensed
			ultra-condensed
			extra-condensed
			semi-condensed
			expanded
			semi-expanded
			extra-expanded
			ultra-expanded
font-style	              可选。定义字体的样式。默认是 "normal"。
			normal
			italic
			oblique

font-weight	              可选。定义字体的粗细。默认是 "normal"。
			normal
			bold
			100 -900

unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。  

9. transform 2D 转换 （移动、缩放、转动、拉长或拉伸）

### 1.translate()  移动

transform: translate(50px,100px);   元素向X轴移动50像素  Y轴移动100像素

2.rotate() 旋转

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

3.scale() 缩放

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
transform: scale(2,3);   //宽度*2   高度*3
transform: scale(1,4);   //宽度不变  高度*4

4. skew() 倾斜转换

transform: skew(30deg,20deg);  //元素在X轴和Y轴上倾斜30度20度。
			skewX;表示只在X轴(水平方向)倾斜。
			skewY;表示只在Y轴(垂直方向)倾斜。

5.matrix()

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
利用matrix()方法旋转div元素30°:
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);

6. transform-origin设置旋转中心点

使用transform-origin设置css3旋转中心 ，有两个参数，代表x和y轴的位置

CSS transform中的rotate的旋转中心设置有两种：
1.使用关键字设置位置 transform-origin: center bottom;

第一个参数可选center、left、right。分别代表盒模型几何横向中间，横向左侧，横向右侧

第二个参数可选center、top、bottom。分别代表盒模型几何竖向中间，竖向头部，竖向底部

2.使用像素值设置位置 transform-origin:3px 40px; 两个参数为坐标值的x和y值，单位是像素。

10.transform 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 转换元素的透视视图。

2d转换 只能在平面上转换
3d转换 是在立体空间中转换

11. transition 过渡

例子：  鼠标移入div上  宽度2s内变为200px   高度2s内变为200px 2s内转换180°
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; 
    transition: width 2s, height 2s, transform 2s;
}

div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

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


div
{
	width:100px;
	height:100px;
	background:red;
	transition-property:width;     //宽度过渡
	transition-duration:1s;        //时长 1s
	transition-timing-function:linear; //效果
	transition-delay:2s;			//延时2s
}

div:hover
{
	width:200px;
}

1.transition-timing-function 切换效果的速度

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

12.动画

1.@keyframes 创建动画

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

或

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

或

@keyframes myfirst
{
    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;