CSS参考手册.docx

1、CSS参考手册css动画属性（Animation）:请使用动画属性时控制外观keyframes属性：规定动画，同时将动画与选择器绑定。语法：keyframes animationname keyframes-selectorcss-style;animationname必需，定义动画名称。keyframes 必需，动画时长的百分比。合法值：0%100%/from(0%)to(100%)。css-styles必需，一个或多个合法的css样式。浏览器支持：Firefox支持替代的-moz-animation、Safari和Chrome支持替代的-webkit-animation、Opera支持替代

2、的-o-animationanimation属性：一个简写属性，包括animation-name:规定 keyframes动画名称。Animation-duration:规定动画完成一个周期（用ms或s计）。Animation-timing-function:规定动画的速度曲线。Animation-delay:规定动画开始时间。Animation-iteration-count:规定动画播放次数。Animation-direction:规定动画是否下周期逆向播放。默认值：none 0 ease 0 1 normal 继承性：no 版本：css3语法：animation:name duratio

3、n timing function delay iteration-count direction JavaScript语法：objectname.style.animation=”mymove 5s infinite” 定义：需要始终规定animation-duration属性，否则时长为0，就不会播放动画了。浏览器支持：IE10 Firefox支持animation属性、Safaris和Chrome支持替代的-webkit-animation属性、Opera支持代替的-o-animation属性可使用简写属性可将动画与div绑定Animation-name属性：为keyframe动画规定名

4、称。默认值：none 继承性：no 版本:css3语法：animation-name:keyframename（规定需要绑定的选择器的keyfarame的名称）|none（规定无动画效果）；JavaScript语法:objectname.animationName=”mymove”Animation-duration属性：定义动画完成需要的时间（用ms或s计）默认值：0 继承性：no 版本：css3语法:animation-duration:time（规定动画完成的时间）；JavaScript语法:objectname.style.animationDuration=”2s”Animation

5、-timing-function属性:规定动画的速度曲线（速度曲线定义动画从一套css样式变为另一套样式所需要的时间，使变化更平滑）。默认值：ease 继承性：no 版本:css3语法：aniamtion-timing-function:value;JavaScript语法:objectname.style.animationTimingFunction=”ease”value: linear: 动画从头到尾的速度相同 (0,0,0.25,1)ease: 动画以低速开始，然后 加快，结束前变慢 (0.25,1,0.25,1)ease-in:动画以低速开始 (0.42,0,1,1)ease-ou

6、t:动画以低速结束 (0.42,0,0.58,1)ease-in-out:动画以低速开始和结束 (0,0,0.58,1)Cubic-bezier(n,n,n,n):在cubic-bezier函数中输入自己的值 Animation-delay属性：定义动画何时开始（用ms或s计），允许负值，负秒前使动画马上开始，但跳过该负秒后进入动画。默认值：0 继承性:no 版本:css3语法:animation-delay:time(可选)；JavaScript语法:objectname.style.animationDelay=”2s”Animation-iteration-count属性：定义动画的播放

7、次数。默认值：1 继承性：no 版本：css3语法：animation-iteration-count:n(具体播放次数)infinite（无限次数）；JavaScript语法：animaitonIterationCount=3Animation-direction属性：定义是否应该轮流反向播放动画。默认值：normal 继承性：no 版本:css3语法：animation-direction:normal（动画正常播放）alternate(轮流反向播放)；JavaScript语法：objectname.style.animationDirection=”alternate”Animate-p

8、lay-state属性：规定动画正在运行还是暂停。默认值：running 继承性：no 版本：css3语法：animation-play-state:paused|running;JavaScript语法：animation-play-state=”paused”Animation-fill-made属性：规定动画在播放之前或之后，其动画效果是否可见，其属性值是由逗号分隔的一个或多个模式关键词。默认值：none 继承性：no 版本:css3语法：animation-fill-made:none(不改变默认行为)forwards(当动画完成时，保持最后一个属性值（在最后一个关键帧中定义）back

9、wards(当动画完成时，保持第一个属性值（在第一个关键帧中定义）both(向前向后填充模式都应用)JavaScript语法:object.style.animationFillMade=”none”Bacdwards在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性（在第一个关键帧中定义）CSS背景属性（background）Background属性；一个简写属性。默认值：not specified 继承性：no 版本： css1+css3 包括：background-color/-position/-size/-repeat/-origin/-clip/-at

10、tachment/-imageBackground-color属性值：Color_name red green blueHex_name #ff0000 #00ff00 #0000ffRgb_number rgb(255,0,0)Transparent 透明（默认）Inherit 从父本元素继承Background-position属性：设置背景图像的起始位置，并设置图像背景原图像（由background-image定义），背景图像重复，将从这一点开始。提示：需要把background-attachment属性设置为”fixed”才能保证在Firefox和Opera中工作。默认值：0% % 继

11、承性：no 版本：css1ValueTop leftTop centerTop rightCenter leftCenter rightBottom leftBotton rightBottom centercenter如果只定义了一个关键词，那么第二个值将默认为centerX% Y%第一个值是水平位置 第二个值是丢垂直位置左上角0%0% 右上角0%100%左下角100%0%右下角100%100%如果只定义了第一个位置，那么第二个位置将默认为50%Xpos Ypos 第一个水平，第二个垂直单位是px其他css单位（0px 0px）如果只定义一个值，另外一个值默认为50%注：可以混 用%和pos

12、ition值Background-size属性：规定背景图像的尺寸默认值：auto 继承性：no 版本：css3语法；background-size:length(宽度 高度 auto) | percentage(_%_%) cover(平铺最大使完全覆盖背景域 ？背景图像的某些部分也许无法显示在背景定位域中) contain(图扩至最大使其宽高适应内容域)JavaScript语法： objectname.style.backgroundSize=”60px 80px” Background-repeat属性：设置是否及如何重复背景图像，从图像开始重复，原图像由background-image

13、定义，并根据background-position的值 确定。默认值；repeat 继承性:no 版本：css1JavaScript语法：object.style.backgroundRepeat=”repeat-y”提示：背景图像的位置根据background-position确定。如果未规定background-position的属性，图像会被放置在左上角。Value Repeat 在水平和垂直方向上都重复（默认）Repeat-x 在水平方向上重复Repeat-y 在垂直方向上重复N0-repeat 图像只显示Inherit 从父元素继承属性Background-origin属性：规定ba

14、ckground-position相对于什么来定位提示：如果背景图像的background-attacchment属性设为”fixed”则属性没有效果。默认值：padding-box 继承性：no 版本：css3语法：background-origin:padding-box(相对于内边距框来定位) border-box(相对于边框盒写定位) content-box(相对于内容框定位)Backgroundclip属性：规定背景的绘制区域。默认值：border-box 继承性：no 版本：css3语法：background-clip:border-box(背景被裁剪到边框盒) padding-b

15、ox(背景被裁剪到内边距框) content(背景被裁剪到内容框)Background-attachment属性：规定背景图像是否固定或者随着页面的其余部分滚动。ValueScroll 图像随着页面其余部分滚动而滚动 （默认）Fixed 当页面其余部分滚动时，图像不流动Iherit 规定从父元素继承Background-image属性：定义背景图像。Value : None url( ) inheritInherit:规定从父元素继承background属性设置。CSS边框属性（border）Border属性：一个简写属性。Border-width/-style/-colorBorder-wi

16、dth值 Thick 粗 Medium 中等(默认) thin 细 length宽度 InheritBorder-style值 :None:无边框Hidden：与none相同，不过应用于表时除外，对于表，hidden用于解决边框冲突Dotted：定义点状边框，在大多浏览器中呈现为实线Dashed：定义虚线Solid定义实线Double：双线（宽度等于border-width的值）Groouve ；3D凹槽边框（效果取决于border-color的值 ）Ridge：3D垄状边框（效果取决于border-color的值 ）Inset：3D inset 边框（效果取决于border-color的值

17、）Outset：3D outset边框（效果取决于border-color的值 ）Inherit：从父本元素继承边框属性Border Border-left border-right border-top border-bottom以上属性 值 border-width border-style border-color Border-width上边框 右边框 下边框 左边框Border-style上边框 右边框 下边框 左边框 Border-color上边框 右边框 下边框 左边框如果只设置两个值则为上下边框 左右边框如果只设置三个值则为上边框 左右边框 下边框border-image属性

18、包括border-source(边框图片路径)/ border-slice（图片内边框内偏移）/ border width（边框宽度）/ border outset/ border repeat边框图像区域超出边框量value:repeated(平铺）rounded(铺满) stretch(拉伸)默认值：none 100% 1 0 stretch 继承性：no 版本：css3Border-radium属性：用于设置四个border-X-radiums默认：0 继承性：no 版本：css3语法；border-radiums:14 length | % / 14 length | %Border-top-left-radiumsBorder-top-right;radiumsBorder-bottom-left-radiumsBorder-bottom-right-radiumsCSS outline属性;用于绘制元素周围的一条线，位于边框周围，可以起到一个突出元素的作用，轮廓线不一定是矩形，也不占空间。包括 outline-color/-style/-width默认：invert none medium 继承性：no 版本：css2三种属性值与border中的三种属性完全一样