css3 总结01
2015-02-17 12:46
113 查看
前缀
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%平均值
hsla()
浏览器全部支持
圆角
border-radius: 20px; //水平,垂直 border-radius: 20px,20px; //左上,右上,右下,左下 border-radius: 20px,20px 20px 20px;
safari:使用-webkit-;ie>=9
下拉阴影
//水平;垂直;模糊直径;颜色 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;
ie不支持
渐变
默认下渐变是垂直方向的;也可以传递一个位置参数来改变方向linear-gradient(#ccc, #ddd, white); //设定一个倾斜度 linear-gradient(-45deg, #ccc, #fff); //水平渐变 linear-gradient(left, #ccc, #fff); //设置颜色停止值 linear-gradient(white, #ddd 20%, black);
safari书写有些区别
firefox: -moz-; chrome:-webkit-; safari:其他实现方法; ie>=10,-ms-; opear>=11.1, -o-;
多重背景
ie>=9选择器
//选中的第一个元素 :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-;
相关文章推荐
- HTML5 CSS3 预研总结文档
- 【20090626-01】栅格数据使用总结(转)
- Java_11_01课堂总结
- CSS3圆角属性总结
- 01背包问题 hnust_xiehonghao的总结
- 天易05----韩顺平oracle视频讲解部分总结(01)
- 关于css3的Transition,Transforms以及动画的一些总结
- css3总结
- CSS3阴影 box-shadow的使用和技巧总结
- 数组总结01
- oracle enqueue-总结01
- CSS3圆角属性总结
- Servlet总结01——servlet的主要接口、类
- java笔记总结_01_Java入门、_02抽象和封装
- 日语三四级语法总结01 时间空间关系1
- 日常生存自救手册视频总结01
- 01.关于使用Hibernate技术实现分页显示的思考总结
- JDBC总结01-jdbc简介
- 项目总结-01
- IO流的总结01