渐变和2D转换.docxVIP

背景渐变背景色的渐变线性渐变background: gradient（有兼容性的问题-webkit- -moz-）div{ width: 500px; height:500px; margin:10px; float: left; border: 1px solid #f66; background: -webkit-gradient(linear,0 0,0 100%,from(#f00),to(#0000FF)); background: -moz-gradient(linear,0 0,0 100%,from(#f00),to(#0000FF)); background:-webkit-gradient(linear,left top,left bottom,from(#f00),to(#00f));}div{ width: 500px; height:500px; margin:10px; border: 1px solid #f66; background:-webkit-gradient(linear,0% 0%,100% 100%,color-stop(0.1,rgb(255,0,0)),color-stop(0.5,rgb(255,255,0)),color-stop(1,rgb(0,0,255)));}div{ width: 500px; height:500px; margin:10px; background: -webkit-linear-gradient(top,red,white,blue); background: -moz-linear-gradient(top,red,white,blue);}径向渐变div{ width: 500px; height:500px; margin:10px; background: -webkit-radial-gradient(50% 50%,black,white,blue); background: -moz-radial-gradient(50% 50%,black,white,blue);}background:repeating-radial-gradient(center,shape size, start-color, ..., last-color)重复径向渐变div{ width:200px; height:200px; padding: 20px; background:-webkit-repeating-radial-gradient(circle contain,#f00,#ff0 10%,#f00 15%)}过渡transitiontransition-property规定应用过渡的 CSS 属性的名称。transition-duration定义过渡效果花费的时间。默认是 0。transition-timing-function规定过渡效果的时间曲线。默认是 ease。ease规定慢速开始，然后变快，然后慢速结束的过渡效果linear规定以相同速度开始至结束的过渡效果ease-in规定以慢速开始的过渡效果ease-out规定以慢速结束的过渡效果ease-in-out规定以慢速开始和结束的过渡效果transition-delay规定过渡效果何时开始。默认是 0。transition ：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]简写属性，用于在一个属性中设置四个过渡属性。注释：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：1.规定把效果添加到哪个 CSS 属性上2.规定效果的时长Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 属性。 Chrome 25 以及更早的版本，需要前缀 -webkit-。当鼠标光标移动到该元素时，它逐渐改变它原有样式宽度的过渡案例：（当鼠标划上时宽度由小逐渐变大） div{ width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; } div:hover{ wi