CSS层叠样式学习总结.doc

css3 总结01
前缀
chrome: -webkit-
safari: -webkit-
firefox: -moz-
ie: -ms-
opera: -o-
书写的时候应该先用有前缀的样式,再用无前缀的样式
颜色
rgb(red, green, blue);
rgba(red, green, blue, opacity[0-1]);
hsl(色度, 饱和度, 亮度);
色度为色轮的度数,0/360d代表红色,120代表绿色,240代表蓝色;
饱和度百分比值,100%表示完全显示该颜色;
亮度百分比值,0%代表黑色,100%代表白色,50%平均值
圆角
border-radius: 20px;//水平,垂直border-radius: 20px,20px;//左上,右上,右下,左下border-radius: 20px,20px 20px 20px;
下拉阴影
//水平;垂直;模糊直径;颜色box-shadow: 10px 5px 15px #000;//内阴影box-shadow: 10px 5px 15px #000 inset;//水平;垂直;模糊直径;延展距离;颜色box-shadow: 10px 5px 15px 15px #000;//多阴影box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;
chromw:-webkit-;safari:-webkit-;ie>=9
文本阴影
//水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em #fff;
渐变
默认下渐变是垂直方向的;也可以传递一个位置参数来改变方向
linear-gradient(#ccc, #ddd, white);//设定一个倾斜度
linear-gradient(-45deg, #ccc, #fff);//水平渐变
linear-gradient(left, #ccc, #fff);//设置颜色停止值
linear-gradient(white, #ddd 20%, black);
选择器
//选中的第一个元素:first-child//选中的最后一个元素:last-child//选中的元素是其父元素的唯一子元素:only-child//选中当前URL的哈希中的目标元素:target
//选中复选框以被勾选的元素
:checked
nth-child选择器
nth-child(n);
nth-child(even);/nth-child(2n);
nth-child(odd);/nth-child(2n+1);
直接后代选择器
>
否定选择器
:not(.current)
ie>=9
过渡
transition: 持续时间, 属性, [动画类型];//多个动画transition: 2s opacity, .5s height ease-in;
定时函数种类
linear
ease-in
ease-out
ease-in-out
例子
div {
background: pink;
width: 50px;
height: 50px;
-moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */
-webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */
-o-transition: 2s width ease-in, 2s height ease-out; /* Opera */
transition: 2s width ease-in, 2s height ease-out;}div:hover{
width: 100px;
height: 150px;}
div {
position: absolute;
left: 10px;
-moz-transition: 2s left
-webkit-transition: 2s left;
-o-transition: 2s left ;
transition:2s left;
}
div:hover{
position: absolute;
left: 100px;
}
firefox:-moz-; chrome:-webkit-; safari: -webkit-; ie>=10; opear: -o-;
css3 总结03