码迷,mamicode.com
首页 > Web开发 > 详细

css3

时间:2015-11-01 21:15:40      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:

用的时候首先记得加前缀:-webkit-,-moz-,-o-,-ms-,因为目前各个浏览器对CSS3和HTML5的兼容性还是参差不齐。

边框:
1.border-radius(实心圆的实现)
2.box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式](用逗号可叠加效果)
3.border-image:url(border.png) 70 70 70 70 round /repeat/stretch(由外到内切片的偏移量,分别为上右下左)

颜色:
1.RGBA(多了一个透明度)
2.颜色渐变:linear/radial gradient(to left,#fff,blue,red)

文字和字体:
1.text-overflow:clip(剪切) | ellipsis(显示省略)/*要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果*/
2.word-wrap:normal(控制连续文本换行) | break-word(内容在边界内换行)
3.@font-face{  font-family:字体名称;src:字体文件在服务器的路径;}
4.text-shadow:X-Offset Y-Offset blur color;


选择器:
1.新增属性选择器a[href^=val](开头) | a[href$=val](结尾) | a[href*=val](包含)
2./:root/:not/:empty/:target(用来匹配指向链接的样式)
3.first-child(匹配第一个子元素)/last-child/nth-child(数字)/nth-last-child/(类型)first-of-type/nth-of-type(2n)/:only-child(来控制仅有一个子元素的样式)/only-of-type
4.:enabled/:checked/::selection选择器(鼠标选择时)/:read-only/:read-write/::before和::after(用来给清除浮动,添加阴影等)

变形:
1.rotate(..deg)(旋转)
2.skew(x y)(扭曲)
3.scale(x,y)(缩放)
4.translate(x,y)(位移,可以应用在居中上)
5.matrix()(矩阵,用于2D变换)
6.transition-duration(过渡所需时间)
7.transition-timing-function(linear/ease-in-out/ease-out/ease-in)(随着时间而过渡的快慢)
8.transition-delay(用来指定当改变元素属性值后多长时间开始执行)

动画:
1.Keyframes(类似于Flash中的关键帧)(格式:百分比{样式})
2.animation-name(调用Keyframes定义好的动画)
3.animation-duration(用来设置CSS3动画播放时间)
4.animation-timing-function(主要用来设置动画播放方式)
5.animation-delay
6.animation-iteration-count(infinite | <number>)
7.animation-direction(normal、alternate)
8.animation-play-state(running和paused)
9.animation-fill-mode(none、forwards、backwords和both)定义在动画开始之前和结束之后发生的操作

布局:
1.columns:列宽 || 列数 / columns-width(auto/列宽) / column-count(auto/列数)
2.column-gap(列间距)
3.column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>(列表边框)
4.column-span(跨列设置)
5.弹性盒子模型
6.伸缩布局

css3

标签:

原文地址:http://www.cnblogs.com/wyfd/p/4928620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!