标签：over for webkit star ansi cursor png parent iat
 |
文件夹：
|
|
推荐样式编写顺序
2 自身属性（合模型）：width。height，margin。padding，border，background（第3点）1 显示属性 ：display，list-style，position，float，clear [注意依照横着的顺序] 3 背景：background 4 行高：line-height 5 文本属性：color,font。text-decoration，text-align。vertical-align，white-space，content 6 其它 cursor/z-index/zoom 7 css3属性：trandsform/transition/animation/box-shadow/border-radius 8 链接的样式请严格依照例如以下顺序加入： a:link-->a:visited-->a:hover-->a:active(LoVeHAte) * 书写的CSS代码的时候请注意依照显示 自身 文本的书写顺序来书写！
|
|
Mozilla 内核 css前缀-moz;
WebKit 内核 css前缀-webkit ;（谷歌已换用blink内核）
Opera 内核 css前缀 -o ; （欧朋已换用blink内核）
Trident 内核 css前缀 -ms ;
CSS3新属性：
1）边框
① border-colors相关属性 border-top-colors border-right-colors border-bottom-colors border-left-colors ② border-image ：
stretch 拉伸方式来填充边框背景图 |
repeat 平铺 图片碰到边界时超出截断 |
round 平铺。图片会工具边框的尺寸动态调整图片大小直至刚 好铺满整个边框
  
③ border-radius 相关属性 border-radius: 1-4 length | % / 1 border-radius数值为合模型的一半就变成圆
，记住：不是相对于合模型的width（如：965x1611）。
而是整个框才是
结果就显示的不是正圆，所以border-radius: 300px; 才干显示正圆，加上border的值
  ‘/‘前面表示水平方向，后面表示垂直方向。每一个方向都能够用1~4个值，缩写的规则遵循“左上開始，
顺时针旋转/ 仅仅能写一个
2）阴影
1.文本阴影 text-shadow（不须要推断浏览器）
 text-shadow:2px 3px 2px #000; 文字阴影的结构是依照下面顺序：X--偏移，Y--偏移，模糊，和颜色;
text-shadow:-2px -3px 2px rgba(0, 118, 160, .25); 设置为负值，X -偏移阴影转移到左側。设置为负值偏移Y -转移阴影顶端。颜色能够用RGBA值。 text-shadow:0px 1px 0px #fff,0px -p1x 0px #000； 文字阴影的列表（以逗号分隔）,1px的顶部和底部1px的阴影。
text-shadow：水平偏移量 垂直偏移量 阴影模糊值 颜色，
水平偏移量 垂直偏移量 阴影模糊值 颜色。（多个阴影用。隔开）
eg：
2.盒阴影 box-shadow（不须要推断浏览器）
盒阴影的使用语法结构与文本阴影类似，如box-shadow: 5px 5px 5px rgba(255,15,255,0.5);
可是。盒阴影多了个属性：外延值，inset，
如box-shadow: 5px 5px 25px rgba(0,0,255,0.5) inset;
  补充个知识点：
|
| 代码： .wrap img{ height: 160px; width: 160px; background: #F00; background: url(teacher_li.jpg); -webkit-mask-image:url(pro_pho_show_pic.png); -webkit-mask-position:50% 50%; -webkit-mask-repeat:no-repeat; } 缩写：-webkit-mask:url(pro_pho_show_pic.png) 50% 50% no-repeat; |
| div{ width:500px; border:1px solid #FA0; background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*横向渐变*/ background:-webkit-gradient-gradient(left,#f00,#ff0 25%,#0ff 55%,#00f 70%,#f00); /*纵向渐变*/ -webkit-background-clip:text; /*仅仅有webkit内核支持text的剪切模式*/ color:transparent; } |
|
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,
rgba(0,0,0,0.6) 100%)
|
| 旋转（1个值） | 缩放（1个值） | 平移（2个值） | 扭曲（2个值） |
| rotate rotate（30deg） |
scale 能够取值正，负，小数 |
translate translate（x,y） 针对2D平面平移
|
skew |
|
rotateX(30deg);
rotateY(30deg);
rotateZ(30deg);
|
缩放的值，X为负时，字体先沿Y轴翻转再缩放 缩放的值。Y为负时，字体先沿X轴翻转再缩放
|
translateX translateY
|
skew(30deg,15deg); skewX(30deg); skewY(15deg); |
一个（）中的属性值之间用逗号分隔。
负数是先翻转元素然后再缩放
。包括两个參数，假设缺少第二个參数，那么第二个參数的值等于第一个參数。
scaleY(<number>):表示仅仅在Y轴(垂直方向)缩放元素。
scaleZ(<number>):表示仅仅在Z轴缩放元素。
前提是元素本身或者元素的父元素设定了透视值（perspective：100;）
|
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转换元素的透视视图。
|
|
參与过渡的属性、过渡时间、过渡方式（动画类型） 延迟时间 【须要写前缀】
普通情况下。transition加入在基本效果上。而不是hover效果中。css原状态和hover状态设置为两种不同的样式，然后通过CSS3过渡进行‘渐变’处理padding、color全部浏览器都支持渐变
|
transition 属性是一个简写属性，用于设置四个过渡属性：
|
.wrap {
height:100px;margin:10px; -webkit-animation:colorChange 10s linear 1.5s infinite; } @-webkit-keyframes colorChange { 0%{ background:#f00;} 10%{ background:#ff0;} } |
|
规定动画。
|
|
|
全部动画属性的简写属性。除了animation-play-state 属性。
|
|
|
规定 @keyframes 动画的名称。
|
|
|
规定动画完毕一个周期所花费的秒或毫秒。默认是 0。
|
|
|
规定动画的速度曲线。默认是 "ease"。
|
|
|
规定动画何时開始。默认是 0。
|
|
|
规定动画被播放的次数。默认是 1。
|
|
|
规定动画是否在下一周期逆向地播放。
默认是 "normal" 。逆向 alternate |
|
|
规定动画是否正在执行或暂停。默认是 "running"，暂停时pause
|
|
|
规定对象动画时间之外的状态。
|
|
transition animation
1、animation多两个參数，循环和动画的方式
2、transition不能自行触发，通过hover等动作或结合JS进行触发。anmiation能够自行执行。
3、transition可控性较弱，仅仅能指定起始状态和结束状态。而animation能够定义多个关键帧。
4、动画在执行结束之后，须要回到初始状态
5、transition的作用，能够用一句话来概括。‘平滑’改变CSS样式
|
标签：over for webkit star ansi cursor png parent iat
原文地址：http://www.cnblogs.com/slgkaifa/p/7267132.html
