css3 一些属性
==text-shadow==
语法：text-shadow: x-offset y-offset blur-radius color
text-shadow:X 轴偏移量 Y轴偏移量 模糊半径 阴影颜色
兼容性，兼容标准浏览器， ie你懂的
=参数说明=
X 轴偏移量：是指阴影水平偏移量，其值可以是正负值，如果值为正值，刚阴影在对象右边，反之其为负值，阴影在对象的左边；
Y 轴偏移量：是指阴影的垂直偏移量，其值也可以是正负值，如果值为正值，则阴影在对象底部，反之为其负值，阴影在对象顶部；
阴影模糊半径：此参数是可选的，但其值只能为正值，如果其值为0时，表示阴影不具备模糊效果，其值越大阴影边缘越模糊；
阴影颜色：此参数是可选的，如果不设定任何颜色时，浏览器会取默认色值的，各浏览器不一样，特别是在webkit内核下的safari和chrome 浏览器解析为无色，也就是所谓的透明，所以还是别图省事哟，
=实际应用=
//css .t-shadow{ text-shadow:2px 2px 3px red; } .t-shadow2{ text-shadow:3px 2px 0px red; } //html <div class="t-shadow"> 文本阴影 </div><div class="t-shadow2"> 文本阴影 </div>
==box-shadow==
语法：box-shadow : inset x-offset y-offset blur-radius spread-redius color
box-shadow: 阴影类型 X轴偏移量 Y轴偏移量 模糊半径 扩展半径 颜色
兼容性 ie9 及以上标准浏览器
=参数说明=
阴影类型：此参数是一个可选的，如果不设值，其默认投影方式是外阴影，如果取其唯一值inset，其投影方式为内阴影
x-offset： 阴影水平偏移量，其值可以是正负值，如果为正值，则阴影在对象右边，反之其值为负值时，阴影在对象左边；
y-offset：是指阴影的垂直偏移量，其值可是正负值，如果为正值，则阴影在对象底部，反之其值为负值时，阴影在对象顶部；
阴影模糊半径：此参数也是可选的，其值只能为正负值，如果为0时，不具备阴影效果，其值越大，阴影模糊半径越大；
阴影扩展半径：也是可选的，值也可以正负值，如果值为正，则整个阴影都延展扩大，反之则为负值，阴影缩小的
阴影颜色：可选，如果不设定，浏览器也是取默认的，有的还为透明，跟text-shadow 是一样的， 尽量不要图省事呀，得写个值哟
=实际应用=
//css //第三个数值代表阴影模糊半径，如果省略就没有模糊效果，扩展半径默认就是有的 .b-shadow{ width: 200px; height: 200px; border: 1px solid #ccc; margin-left: 50px; -webkit-box-shadow:2px 2px 3px red; -moz-box-shadow:2px 2px 3px red; box-shadow:2px 2px 3px red; } //当给同一个元素使用多个阴影属性时，需要注意它的顺序，最先写的阴影将显示在最顶层 .b-shadow{ width: 200px; height: 200px; border: 1px solid #ccc; margin-left: 50px; -webkit-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green; -moz-box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green; box-shadow:0 -3px 5px blue,3px 0 5px yellow,0 3px 5px red,-3px 0 5px green; } //html <div class="b-shadow"> 盒阴影 </div>
//如果前面的阴影模糊值小于后面的阴影模糊值，那么前面的显示在后面之上，如果前面阴影的模糊值大于后面的阴影模糊值，那么前面的阴影将遮住后面的阴影效果。
.b-shadow{
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin-left: 50px;
/*box-shadow: 0 0 5px red,0 0 15px blue;*/
box-shadow: 0 0 15px red,0 0 5px blue;
}
//四边具有相同的阴影效果（只设置阴影模糊半径和阴影颜色）
.b-shadow{
box-shadow:0 0 5px red;
}
//四边具有相同的阴影（只设置阴影扩展半径和阴影颜色）
.b-shadow{
box-shadow:0 0 0 1px red;
}
//内阴影inset效果，但是img标签上直接应用box-shadow的inset是没有任何效果的
.b-shadow{
box-shadow: inset 0 0 10px red;
}
img {box-shadow: inset 0 0 10px red;}// 不要这样做
//让图片img实现内阴影的方法，我们把img放到一个div中，然后不直接在img上运用box-shadow属性，而是在img的父元素div上运用box-shadow，接着我们在给img进行相对定位，并让其在父元素下一层
.b-shadow{
/*width: 200px;
height: 200px;*/
/*border: 1px solid #ccc;*/
margin-left: 50px;
-webkit-box-shadow: inset 0 0 10px blue;
-moz-box-shadow: inset 0 0 10px blue;
box-shadow: inset 0 0 10px blue;
display: inline-block;
}
.b-shadow img{
position:relative; z-index:-1;
display: block;
}
//让图片img实现内阴影的方法，我们换过一种实现方法，这种方法我们是在img父元素上应用伪元素“:before”来实现
.b-shadow{
position: relative;
display: inline-block;
*display: inline;
}
.b-shadow:before{
content:"";
position: absolute;
width: 100%;
height: 100%;
-moz-box-shadow:inset 0 0 5px 1px blue;
-webkit-box-shadow: inset 0 0 5px 1px blue;
box-shadow: inset 0 0 5px 1px blue;
}
.b-shadow img {
display: block;
}
//给body顶部增加一个阴影
body:before {
content:"";
position:fixed;
top: 10px;
left: 0;
width: 100%;
height: 10px;
z-index: 999;
box-shadow: 0 0 10px red;
}
//Drop-shadow效果 .b-shadow{ width: 300px; height: 150px; position: relative; background: #ccc; } .b-shadow:before,.b-shadow:after { content: ""; position: absolute; z-index: -1; bottom: 15px; left: 10px; width: 50%; height: 20%; /*add box-shadow*/ -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8); -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8); box-shadow: 0 15px 10px rgba(125,125,125,0.8); /*add css3 transform*/ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .b-shadow:after { right:10px; left: auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); }
==transform==
语法：transform：rotate(旋转) || translate(移动) || scale(缩放) || skew(扭曲) || matrix(矩阵)
兼容性：ie9 及以上
transform 的意思是变形，改变的意思， 在css3 中transform 主要包换一下属性：旋转 rotate、移动translate、绽放scale、扭曲skew 以及矩阵变形matrix
如果同时对一个元素进行transform多个属性 如 rotate, translate scale, 三种，多个属性之间用空格隔开，空格哟，亲，transform实现了一些可以用svg实现的同样功能，他可用于行元素和块元素
一、旋转rotate
rotate(<angle>) ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)
二、移动translate
移动translate分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），具体使用方法如下：
1、translate(tx,ty) 表示对象按照设定的x,y参数值进行平移，tx 是第一个过渡值参数，ty 是第二个过渡值参数选项，如果ty未被提供，则ty以 0 作为其值。当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点。如transform:translate(100px,20px)
2、translateX(tx) ： 通过给定一个X方向上的值指定一个translation。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px)
3、translateY(ty) ：通过给定一个Y方向上的值指定一个translation。只向Y轴进行移动，基点在元素中心点，也可以通过transform-origin改变基点位置。如：transform:translateY(20px)
三、缩放scale
缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩 放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中 心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
1、scale(<number>[, <number>])：提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D 缩放）。如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示 X，Y两个方向的缩放倍数是一样的，并以X为准。如：transform:scale(2,1.5)
2、scaleX(<number>) ： 使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1)，其基点一样是在元素的中心位置，我 们同样是通过transform-origin来改变元素的基点。如：transform:scaleX(2)
3、scaleY(<number>) ： 使用 [1,sy] 缩放矢量执行缩放操作，sy为所需参数。scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform- origin来改变元素的基点。如transform:scaleY(2)
四、扭曲skew
扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值 进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
1、skew(<angle> [, <angle>]) ：X轴Y轴上的skew transformation（斜 切变换）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行，第一 个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为 基点，我们也可以通过transform-origin来改变元素的基点位置。如：transform:skew(30deg,10deg)
2、skewX(<angle>) ： 按给定的角度沿X轴指定一个skew transformation（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行扭曲变行，同样可以通过transform-origin来改变元素的基点。如：transform:skewX(30deg)
3、skewY(<angle>) ： 按给定的角度沿Y轴指定一个skew transformation（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如：transform:skewY（10deg）
五、矩阵matrix
transform: matrix(a,b,c,d,e,f);
实际上transform: matrix(1, 0, 0, 1, 30, 30);就等同于transform: translate(30px, 30px);. 注意：translate,rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。
了解更多http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
六、另外我们需要理解改变元素基点transform-origin
transform-origin 它的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其 中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有 点像我们background-position设置一样。其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变。
transform-origin:(left,top); transform-origin:right; transform-origin(25%,75%);
这里还要提醒大家一点的是，transform-origin并不是transform中的属性，他具有自己的语法，transform-origin跟其他的css3属性一样，我们需要在不同的浏览内核中加上相应的前缀，下面列出各种浏览器内核下的语法规则：
transform -origin在不同浏览器内核下的书写规则
//Mozilla内核浏览器：firefox3.5+
-moz-transform-origin: x y;
//Webkit内核浏览器：Safari and Chrome
-webkit-transform-origin: x y;
//Opera
-o-transform-origin: x y ;
//IE9
-ms-transform-origin: x y;
//W3C标准
transform-origin: x y ;
transform在不同浏览器内核下的书写规则
//Mozilla内核浏览器：firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器：Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;
==Transition==
==Animation==
待续----
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
