资源描述：
《css层叠样式学习总结》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、.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-rad
2、ius:20px;//水平，垂直border-radius:20px，20px;//左上，右上，右下，左下border-radius:20px，20px20px20px;下拉阴影//水平；垂直；模糊直径；颜色box-shadow:10px5px15px#000;//内阴影box-shadow:10px5px15px#000inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow:10px5px15px15px#000;//多阴影box-shadow:01px1px#fffinset,5px5px10px#000;chrom
3、w:-webkit-;safari:-webkit-;ie>=9文本阴影...//水平;垂直;颜色text-shandow:1px1px#fff;//水平;垂直;模糊直径;颜色text-shandow:1px1px.3em#fff;渐变默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向linear-gradient(#ccc,#ddd,white);//设定一个倾斜度
linear-gradient(-45deg,#ccc,#fff);//水平渐变
linear-gradient(left,#ccc,#fff);//设置颜色停止值
4、linear-gradient(white,#ddd20%,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
5、(.current)ie>=9过渡transition:持续时间，属性，[动画类型];//多个动画transition:2sopacity,.5sheightease-in;定时函数种类...·linear·ease-in·ease-out·ease-in-out例子div{
background:pink;
width:50px;
height:50px;
-moz-transition:2swidthease-in,2sheightease-out;/*Firefox4*/
-webkit-transition:2swidthease
6、-in,2sheightease-out;/*SafariandChrome*/
-o-transition:2swidthease-in,2sheightease-out;/*Opera*/
transition:2swidthease-in,2sheightease-out;}div:hover{
width:100px;
height:150px;}div{
position:absolute;
left:10px;
-moz-transition:2sleft
-webkit-transition:2sleft;
-o-trans
7、ition:2sleft;
transition:2sleft;
}
div:hover{
position:absolute;
left:100px;
}firefox:-moz-; chrome:-webkit-;safari:-webkit-;ie>=10;opear:-o-;css3总结03·box-flex:设置或检索弹性盒模型对象的子元素如何分配其剩余空间。·...
a
b
c
#box{display:box;width:240px;he
8、ight:100px;margin:0;padding:10px;list-style:none;}#boxli:nth-child(1){box-flex:1;}#boxli:nth-chi
