资源描述:
《CSS层叠样式学习总结.doc》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
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-ra
2、dius: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;ch
3、romw:-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);·直接后代选择器>·否定选择器
5、:not(.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:2swidthe
6、ase-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-
7、transition: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:240p
8、x;height:100px;margin:0;padding:10px;list-style:none;}#boxli:nth-child(1){box-flex:1;}#boxli:nth-child(2){box-