2014.01.16 笔记
CSS3
选择器
属性选择器： a[href$=’.pdf’], a[href^=’mailto’], a[class*=’item’]
兄弟选择器： Div~img
伪类选择器(CSS伪类 用于向某些选择器添加特殊的效果)： :nth-child(n), :nth-last-child(n), :last-child, :checked, :empty, :only-child, :nth-of-type(odd), :nth-of-type(even)
样式
字体阴影： text-shadow:5px -5px 5px #999; （前两个值分别表示水平方向的位移距离和垂直方向的位移距离， 第三个值表示阴影的模糊半径(包含0及以下的值均表示模糊)，最后一个则是阴影的颜色）
盒模型阴影： box-shadow:5px -5px 5px #999;
浏览器前缀：
Firefox: -moz-box-shadow:5px -5px 5px #999;
Opera:-o-box-shadow:5px -5px 5px #999;
IE9+: -ms-box-shadow:5px -5px 5px #999;
圆角：border-radius:5px; （此属性值是以像素为单位的圆角半径。）
浏览器前缀：
Chorme: -webkit-border-radius:5px;
FireFox: -moz-border-radius:5px;
Opera: -o-border-radius:5px;
IE9+: border-radius:5px;
渐变：-webkit
用法： background:-webkit-gradient(linear,0 0,0 100%,from(red),to(blue));
{
linear: 渐变的类型;
0 0或者left-top: 渐变开始的XY轴坐标；
0 100%或者left-bottom：渐变的结束的XY轴坐标；
frome(red): 开始的颜色；
t o(blue):结束的颜色。
}
渐变：-mozilla
用法：background:-moz-linear-gradient(top,red,blue);
这里将 linear:渐变类型 放到了属性前缀中。top:从哪里开始渐变。 Red,blue： 开始颜色，结束颜色。
旋转： transform:rotate(*);
若想要让指定的元素旋转，只需要如此定义： #content{transform:rotate(45deg);}
rotate: 表示旋转的意思，其值为角度（旋转方向为顺时针）；
deg: 是CSS3的”Values and Units” 模块中定义的一个角度单位；
浏览器前缀：
Chrome: -webkit-transform:rotate(45deg);
Firefox: -moz-transform:rotate(45deg);
Opera: -o-transform:rotate(45deg); [IE9不支持此属性]
缩放：transform:scale(num, num); 使用scale方法来实现文字或图象的缩放处理，在参数中指定缩放倍率。
如：scale(0.5);表示缩小50%。 scale(2);表示放大1倍。
此方法可设置两个值，分别表示水平和垂直方向，设置一个参数，则第二个参数默认取第一个。
浏览器前缀：
Chrome: -webkit-transform:scale(0.5);
Firefox: -moz-transform:scale(0.5);
Opera: -o-transform:scale(0.5); [IE9不支持此属性]
倾斜：transform:skew(num,num); 使用skew方法实现指定元素的倾斜角度，两个参数分别表示水平方向的倾斜角度和垂直方向的倾斜角度。参数二可省略。如：#box{transform:skew(-45deg,20deg); }
这也有2个需要加的浏览器前缀： -moz, -o, -webkit
变形处理
移动： translate 在参数中分别制定水平方向和垂直方向上的移动距离。
如：translate(50px,50px); 表示水平和垂直方向上均移动50个像素。
translateX(50px); 表示水平方向
translateY(50px); 表示垂直方向
动画
过渡：transitions:property duration timing-function;
property: 表示对哪个属性进行动画设置，如：background,color等
Duration: 表示动画执行时间，如：1s, 0.5s;
timing-function: 表示动画执行的计算种类， 如：linear 渐变。
如实现一个，段落P默认背景色是黑色，当鼠标悬停时渐变成红色，执行时间为1s的动画。
P{color:#fff; background:#000; -浏览器前缀-transition:background 1s linear;}
组合动画： transitions 就是我们将多个变化属性一起写入到transitions中，并使用逗号隔开。
如：elements{transitions:arg1 时间 类型，arg2 时间 类型，...; }
通过这个整理，大致的记住了一些。后面会再看看资料，将它完善。
