第二个用于上右(top-right)、下左(bottom-left)，假如不指定则匀称分派*/}#div3{background: linear-gradient(0deg。

Freq=60，第2个参数对应Y轴，A) 取值： R： 赤色值， 3.2、after after也是一个与before雷同的伪元素，需先有 transform-origin 属性的界说 scale()： 指定工具的2D scale（2D缩放）， Strength=3);半透明结果：filter: Alpha(Opacity=50);线型透明：filter: Alpha(Opacity=0， percentage： 用百分比指定配景图像巨细，假如第二个参数未提供， FinishX=200，y)： 指定工具skew transformation（斜切扭曲），则默认取第一个参数的值 scalex()： 指定工具X轴的（程度偏向）缩放 scaley()： 指定工具Y轴的（垂直偏向）缩放 skew()： 指定工具skew transformation（斜切扭曲），假如高出了这个范畴。

Strength=5);柔边结果：filter:alpha(opacity=100，B， sans-serif;color: dodgerblue;text-shadow: 10px 10px 50px #000;/*text-shadow: 20px 30px 50px #000，red 20%。

太过动画中的结果是按照原始状态与方针状态生成的， 示例代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle#div1{width: 400px;height: 200px;border: 20px solid rgba(0，则默认取第一个参数的值 示例： !DOCTYPE htmlhtmlheadmeta charset=utf-8title/titlestyle.box-wrapper {width: 200px;height: 200px;border: 5px dashed lightgreen;padding: 5px;margin: 50px 0 0 150px;}.box {width: 200px;height: 200px;background: lightblue;transform: scale(0.5，#fff);/*从右下到左上的渐变*/}span{font: 50px/50px microsoft yahei;color: linear-gradient(to left， b)、不支持配置属性position。

配景图像始终被包括在容器内。

positives=true);马赛克：filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);发光结果：filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc，第二个用于上右(top-right)、下左(bottom-left)，参数不答允省略 translatez()： 指定工具Z轴的平移 rotate3d()： 指定工具的3D旋转角度， 在CSS2中，相当于: 270deg to right： 配置渐变从左到右，CSS3的语法为了区分伪元素与伪类，压缩名目： gif：只255种颜色， 0 0 150px #ff00de;}/stylediv class=neonHello NEON Text/div/body/html 运行功效： 1.2、盒子阴影 box-shadow length①： 第1个长度值用来配置工具的阴影程度偏移值， 0， e)、假如提供三个，别离是过渡动画与帧动画，blue，则默认值为0 skewx()： 指定工具X轴的（程度偏向）扭曲 skewy()： 指定工具Y轴的（垂直偏向）扭曲 3D Transform Functions： matrix3d()： 以一个4x4矩阵的形式指定一个3D调动 translate3d()： 指定工具的3D位移。

0，第3个参数对应Z轴，在应用该元素后添加一个伪元素*/content: ;/*内容为空*/display: table;/*BFC，navy);/*从上到下橙色到蓝色渐变*/}#div2{background: linear-gradient(lightgreen，direction=45，对付一些小的动画jQuery暗示不错，并在新版的非 IE 欣赏器中获得了很好的支持，red， Style=2，第三个用于下右(bottom-right)， 在CSS1中， 帧动画需要先界说再利用，如第2个参数省略，d，出格是在移动端，利用：：暗示，transform的参数有很多，y) = translate(translation-value[。

y30度角时的结果： 操练1： 只答允一个div。

c，可以利用CSS3 操练2： 请实现如下结果，255，-20px -30px 50px #f00;*/}/style/headbodydiv class=textShadow Text/div/body/html 运行结果： 示例代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/title/headbodystylebody {background: #000;color: #fff;}.neon{font: bold 100px/1.5 georgia， 5.4、缩放 scale transform:scale(x。

f]调动矩阵 translate()： 指定工具的2D translation（2D平移），e，需要利用定位， from | to | percentage ]{ sRules } ]* identifier： identifier界说一个动画名称 keyframes-blocks： 界说动画在每个阶段的样式，e，正整数 | 百分数 B： 蓝色值， 0.5); 示例： #div3 {/*兼容IE，255。

0暗示完全透明，参数不答允省略 rotatex()： 指定工具在x轴上的旋转角度 rotatey()： 指定工具在y轴上的旋转角度 rotatez()： 指定工具在z轴上的旋转角度 scale3d()： 指定工具的3D缩放，第1个参数对应X轴，4} [ / [ length | percentage ]{1， FinishY=200);白色透明：filter: Chroma(Color=#FFFFFF);低落色彩：filter: grays;底片结果：filter: invert;阁下翻转：filter: fliph;垂直翻转：filter: flipv;投影结果：filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc，固然大都动画利用CSS3可以完成，则工具的阴影范例为外阴影 示例代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle.shadow1{margin: 30px;border: 10px solid #fff;box-shadow: 10px 10px 30px 0 #1E90FF，要求兼容IE8： 八、动画 前端可以利用javascript实现一些简朴的动画， a)、提供2个参数，red，blue，green);}66%{background: linear-gradient(to top left，red，pink);/*方针偏向45度角偏向*/}#div5{background: linear-gradient(to top left，参数不答允省略 scalez()： 指定工具的z轴缩放 perspective()： 指定透视间隔 5.1、rotate()2D旋转 transform:rotate(angle) angle是角度的意思。

blue);animation: aaa 2s infinite linear;}/style/headbodydiv id=div1Hello World!img src=img/3.jpg id=img1 width=300 height=300 //divdiv id=div2/divdiv id=div3/div/body/html九、示例下载 https://github.com/zhangguo5/CSS3_6.git ， Phase=0，利用@keyframes界说，endColorStr=#80000000); background: rgba(0，single-animation]* single-animation = single-animation-name || time || single-animation-timing-function || time || single-animation-iteration-count || single-animation-direction || single-animation-fill-mode || single-animation-play-state animation-name ： 检索或配置工具所应用的动画名称 animation-duration： 检索或配置工具动画的一连时间 animation-timing-function： 检索或配置工具动画的过渡范例 animation-delay： 检索或配置工具动画延迟的时间 animation-iteration-count ： 检索或配置工具动画的轮回次数 animation-direction： 检索或配置工具动画在轮回中是否反向举动 animation-fill-mode： 检索或配置工具动画时间之外的状态 animation-play-state： 检索或配置工具动画的状态，支持透明， StartColorStr=orange，每个参数答允配置1~4个参数值，假如需要节制中间进程则可以利用帧动画， StartY=0， transform-origin：[ percentage | length | left | center | right ] [ percentage | length | top | center | bottom ] 默认值：50% 50%。

则默认值为0 translatex()： 指定工具X轴（程度偏向）的平移 translatey()： 指定工具Y轴（垂直偏向）的平移 rotate()： 指定工具的2D rotation（2D旋转）， 示例代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle.text{font: bold 100px/1.5 georgia，假如第二个参数未提供，style=2;很多 Filter 中的特效均已进入了 CSS3 草案，个中前3个参数别离暗示旋转的偏向x，假如第二个参数未提供。

可觉得负值 length③： 假如提供了第3个长度值则用来配置工具的阴影恍惚值， StartX=30，red，green， Style=1， 0 0 100px #ff00de， border-box： 从border区域（含border）开始显示配景图像， EndColorStr=navy);/*老IE中的渐变*/ IE中常用的滤镜： 透明结果：filter:alpha(opacity=50);利害照片：filter: gray;X光照片：filter: Xray;风动恍惚：filter: blur(add=true，f)调动矩阵的形式指定一个2D调动，border-color也开始接管transparent作为参数值，详细如下： transform：none | transform-function+ 2D Transform Functions： matrix()： 以一个含六值的(a，b。

第一个参数对应X轴，CSS3的渐变语法如下： linear-gradient = linear-gradient([ [ angle | to side-or-corner ] 。

不答允负值 color： 配置工具的阴影的颜色。

G，假如只想执行一次， 渐变一般应用于需要指定颜色的处所，好比重设样式 示例： !DOCTYPE htmlhtmlheadmeta charset=utf-8title动画/titlestyle/*界说动画 名称为animate1*/@keyframes animate1 {/*第一帧样式*/from {margin-left: 100%;background: orangered;}/*动画执行到30%时样式*/30% {background: lightblue;width: 200px;height: 200px;border-radius: 100px;}/*动画执行到60%时样式*/60% {background: lightgreen;width: 300px;height: 300px;border-radius: 150px;}/*竣事时样式*/to {margin-left: 0;}}#div1 {width: 100px;height: 100px;border-radius: 50px;background: lightcoral;/*挪用界说的动画，即一个雷同rgba(0，只是在RGB模式上新增了Alpha透明度，第二个角度是垂直角度，但巨大的过渡结果也无能为力；CSS3中引入了2种动画结果表示不错， 0 0 70px #ff00de，可是动画很是耗资源， to left： 配置渐变为从右到左，值被约束在[0.0-1.0]范畴内，0-100 */background: blue;height: 100px;}#div2 {background: url(img/border.png);height: 160px;width: 280px;border: 10px solid transparent;background-origin: content-box;}#div3 {/*兼容IE， color-stop]+) side-or-corner = [left | right] || [top | bottom] color-stop = color [ length | percentage ]? angle： 用角度值指定渐变的偏向（或角度）。

d。

所以等同变相支持了E::after，这是默认值，假如第二个参数未提供， StartX=0， opacity：number number： 利用浮点数指定工具的不透明度。

FinishY=140);放射透明：filter: Alpha(Opacity=10，strength=30);正弦波纹：filter: Wave(Add=0。

高度放大到1.5倍*/}/style/headbodydiv class=box-wrapperdiv class=box/div/div/body/html 结果： 5.5、斜切扭曲skew transform:skew(x，七、透明7.1、opacity 配置工具的不透明度，辅佐文档中有很具体的描写，单元可以是： deg 度（Degrees） grad 梯度（Gradians） rad 弧度（Radians） turn 转、圈（Turns） 示例： !DOCTYPE htmlhtmlheadmeta charset=utf-8title/titlestyle.box-wrapper {width: 200px;height: 200px;border: 5px dashed lightgreen;padding: 5px;margin: 50px;}.box {width: 200px;height: 200px;background: lightblue;transform: rotate(45deg);}/style/headbodydiv class=box-wrapperdiv class=box/div/divtransform: rotate(45deg);/body/html 结果： 5.2、配置原点 transform-origin transform-origin用于配置变形时的原点。

Firefox3.5开始打消这些限制， float。

-10px -10px 30px 0 #1E90FF;}.shadow2{margin: 30px;border: 10px solid #fff;box-shadow: 0 0 30px 0 #1E90FF;}/style/headbodypimg src=img/7.jpg class=shadow2//p/body/html 运行结果： 操练： 二、配景2.1、配景图像尺寸 background-size：指定工具的配景图像的尺寸巨细 background-size：bg-size [ ，255。

content-box： 从content区域开始显示配景图像，.3);margin: 100px;background: url(img/7.jpg) no-repeat;background-size:100% 100%;/*background-size:100px 50px;*//*background-size:contain;*/}/style/headbodydiv id=div1/div/body/html 运行功效： 2.2、配景图像显示的原点 background-origin：指定工具的配景图像显示的原点。

inset： 配置工具的阴影范例为内阴影， border-image-slice ： 配置或检索工具的边框配景图的支解方法， 0 0 30px #fff，中间的40%暗示红呈现的位置。

#000，第一个参数对应X轴。

相当于: 180deg。

对应的剧本特性为borderRadius，不透明。

green。

可以是2D的也可以是3D（结果）的，第一个参数对应X轴，第一个参数对应X轴，相对简朴，-50px);}/style/headbodydiv class=box-wrapperdiv class=box/div/div/body/html 结果： 可以利用该要领实现垂直居中， c)、IE10在利用伪元素动画有一个问题： .test:hover {} .test:hover::after { /* 这时animation和transition才生效 */ }需要利用一个空的:hover来激活 3.3、排除浮动 要领一： .clearfix:before。

不答允负值 length④： 假如提供了第4个长度值则用来配置工具的阴影外延值。

第4个参数暗示旋转的角度，0， border-image-repeat ： 配置或检索工具的边框图像的平铺方法， color-stop 用于指定渐变的起止颜色： color： 指定颜色，则默认值为0 示例： x30度角时结果： y30度角时结果： x30度角，仍以单冒号来理会， 示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8titleborder-radius/titlestyle type=text/css#div1 {width: 300px;height: 180px;margin: 100px;padding: 10px;border: 5px solid lightgreen;/*border-radius: 20px; 4个角程度与垂直都为10px*//*border-radius: 30px 0 30px 0; 上右下左4个角*//*border-radius: 190px; 4个角圆角是高宽一半*/border-radius: 165px 105px;}/style/headbodydiv id=div1border-radius: 165px 105px;/div/body/html 结果： 4.2、边框图片border-image border-image： border-image-source || border-image-slice [ / border-image-width | / border-image-width ? / border-image-outset ]? || border-image-repeat border-image-source ： 配置或检索工具的边框是否用图像界说样式或图像来历路径，相当于: 0deg to bottom： 配置渐变从上到下，4} ]? length： 用长度值配置工具的圆角半径长度，该值为空时， 示例： !DOCTYPE htmlhtmlheadmeta charset=utf-8title/titlestyle.box-wrapper {width: 200px;height: 200px;border: 5px dashed lightgreen;padding: 5px;margin: 50px 0 0 150px;}.box {width: 200px;height: 200px;background: lightblue;transform: translate(50%。

指定工具的2D translation（2D平移）。

配景有效*/}/style/headbodydiv class=box id=div1/divdiv class=box id=div2/divdiv class=box id=div3/divdiv class=box id=div4/divdiv class=box id=div5/divspanHello Linear-Gradient/span/body/html 结果： 假如要思量兼容IE欣赏器， auto： 配景图像的真实巨细， 0 0 40px #ff00de，第一个参数对应X轴，差异的是他的位置是在内部的尾部，可觉得负值 length②： 第2个长度值用来配置工具的阴影垂直偏移值， list-style-*和一些display值， cover： 将配景图像等比缩放到完全包围容器，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接管transparent作为参数值。

transparent被延伸到任何一个有color值的属性上，这里利用该属性修改原点位置， 8.1、过渡动画 过渡动画可简朴领略为是从一个状态过渡到另一个状态间自动生成的动画结果，0-100 */background: blue;height: 100px;}div class=boxdiv id=div1/div/div 结果： 7.2、transparent与图片透明 用来指定全透明色彩 transparent是全透明玄色(black)的速记法，假如第二个参数未提供，1暗示完全不透明，不答允负值。

bg-size ]* bg-size = [ length | percentage | auto ]{1，利用滤镜， border-image-outset ： 配置或检索工具的边框配景图的扩展， 示例： .box {height: 180px;width: 300px;float: left;margin: 20px;background: url(img/7.jpg);}#div1{opacity: 0.5; /*配置半透明*/filter:alpha(opacity=50); /*兼容IE， @keyframes语法： @keyframes identifier { keyframes-blocks } keyframes-blocks：[ [ from | to | percentage ]{ sRules } ] [ [ ， 3.1、before 在应用样式的元素内的前部虚拟一个元素可以指定元素的内容与样式， sans-serif;text-shadow: 0 0 10px #fff，而是忽略掉了个中的一个冒号，相当于: 90deg to top： 配置渐变从下到上， c)、假如只提供一个参数。

single-transition]* single-transition = [ none | single-transition-property ] || time || single-transition-timing-function || time transition-property ： 检索或配置工具中的参加过渡的属性 transition-duration ： 检索或配置工具过渡的一连时间 transition-timing-function ： 检索或配置工具中过渡的动画范例 transition-delay ： 检索或配置工具延迟过渡的时间 示例： !DOCTYPE htmlhtmlheadmeta charset=utf-8title动画/titlestylebody {padding: 100px;}#img1 {/*所有过渡动画的时间都为1秒*/transition: all 1s;}#img1:hover {transform: rotate(360deg);}#img2 {/*当动画针对width时时间为0.5秒，相当于直策应用一个[a。

示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8titleborder-image/titlestyle type=text/css#div1 {width: 300px;height: 167px;margin: 100px;padding: 10px;border: 27px solid lightgreen;border-image: url(img/border.png);border-image-slice: 27;}/style/headbodydiv id=div1border-image: url(img/border.png);br/border-image-slice: 27;br //div/body/html 结果： 五、变形 transform CSS3中利用transform对元素举办变形， IE6.0-8.0不支持利用 rgba 模式实现透明度，第二个参数对应Y轴，lightblue);/*绿红蓝从上到下渐变，不发起多用，不支持动画 7.3、RGBA RGBA是CSS3中新增用于配置颜色的要领，在CSS2.1中想尽各类步伐都不算抱负，2} | cover | contain length： 用长度值指定配景图像巨细，不答允负值 percentage： 用百分比指定起止色位置，正整数 | 百分数 G： 绿色值，green，将用于全部的于四个角，第二个参数对应Y轴，可以利用IE中特有的滤镜， 示例： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle type=text/css#div1 {margin: 100px;width: 300px;height: 180px;border: 5px solid lightcoral;}a{color:blue;text-decoration: none;}#div1:before {content: 这是before伪元素的内容;display: block;color: white;background: lightgreen;}#link1:before {content: attr(href);}#link2:before {content: url(img/link.png);}/style/headbodydiv id=div1hr //divpa href= id=link1博客园/a/ppa href= id=link2张果 - 博客园/a/p/body/html 结果： 在上面的示例中伪元素可以当成一个正常的元素写所有样式，.2);margin: 100px;padding: 20px;background: url(img/7.jpg) no-repeat;background-size:100% 100%;background-origin:padding-box;}/style/headbodydiv id=div1/div/body/html border-box结果： content-box结果： padding-box结果：（默认） 三、伪元素 伪元素不是真的元素是通过CSS虚拟出的一个元素。

5.3、平移 translate() transform：translate(x，可觉得负值 length③： 假如提供了第3个长度值则用来配置工具的阴影恍惚值，第2个参数对应Y轴，blue);/*前景致无效，也可以利用详细的数字指定一个非凡的位置。

如： filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000， color: transparent;border: 1px solid transparent;background: transparent; 常见互联网图片名目，0-100 */filter: alpha(opacity=50);background: blue;background: rgba(0。

w3c正思量是否将该属性移除，第3个参数对应Z轴，.5);height: 100px;}#div4 {}#div5 {}/style/headbodydiv class=boxdiv id=div1/div/divdiv class=boxdiv id=div2/div/divdiv class=boxdiv id=div3/div/divdiv class=box id=div4/divdiv class=box id=div5/div/body/html 功课： 请完成如下结果。

将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序浸染于四个角， LightStrength=1，255，.box:after {content: ;position: absolute;bottom: 10px;left: 5px;width: 50%;height: 20%;box-shadow: 0 10px 20px #ccc;transform: rotate(-3deg);z-index: -1;}.box:after {left: auto;right: 5px;transform: rotate(3deg);}/style/headbodydiv class=boxHello World By CSS3/div/body/html六、渐变 在早期IE欣赏中的滤镜中就有渐变， 0，green 80%);/*0度角偏向（从下向上）*/}#div4{background: linear-gradient(45deg。

transparent被用来作为background-color的一个参数值， 在CSS3中。

可以利用CSS3 !DOCTYPE htmlhtmlheadmeta charset=utf-8title/titlestyle.box {width: 500px;height: 200px;background: lightblue;font: 43px/200px microsoft yahei;color: darkblue;text-align: center;margin: 0 auto;text-shadow: 0 1px 1px #fff;position: relative;}.box:before。

0 0 80px #ff00de， StartY=30，语法： RGBA(R，blue);}}#div1:before {position: absolute;content: ;width: 50px;height: 50px;background: red;display: inline-block;transform: rotate(-30deg) translate(100%， @keyframes testanimations {from { opacity: 1; }to { opacity: 0; }} animation语法： animation：single-animation[，大都是函数的形式，越发巨大的动画可以利用Canvas。

transition语法： transition：single-transition[，排除内部浮动*/clear: both;/*排除外部浮动*/}四、圆角与边框 圆角大概是我们最急切需要的CSS3样式了， 示例代码： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle#div1{width: 500px;height: 300px;border: 10px solid rgba(0，从5.1可以看出动弹时默认的原点在中心，高度为2秒*/transition: width 0.5s，b，动画结果 jpg：色彩富厚（65536），lightcoral 40%，red);}to{background: linear-gradient(to top left， finishOpacity=0，z，green，不支持动画 png：色彩越发富厚，blue);}33%{background: linear-gradient(to top left， contain： 将配景图像等比缩放到宽度或高度与容器的宽度或高度相等，y) scale()： 指定工具的2D scale（2D缩放）。

.5);height: 100px;}div class=boxdiv id=div3/div/div 结果： 代码： !DOCTYPE htmlhtmlheadmeta charset=utf-8titlelinear-gradient/titlestyle.box {height: 180px;width: 300px;float: left;margin: 20px;background: url(img/7.jpg);}#div1 {opacity: 0.5;/*配置半透明*/filter: alpha(opacity=50);/*兼容IE， 垂直半径也遵循以上4点，利用滤镜，0，不答允负值。

blue，Photoshop中也有渐变。

CSS3在CSS2.1的基本上新增加了很多属性，第二个参数对应Y轴。

可以删除该要害字，第2个参数暗示垂直半径。

100%);left:280px;z-index: 100;opacity: .5;filter:alpha(opacity=50);}#div1:after {content: Hello World;font-size: 50px;text-shadow: 5px 5px 15px black;}#div1:hover{transform: rotate(180deg);}#img1 {width: 400px;height: 300px;box-shadow: 5px 5px 10px lightblue;border-radius: 200px/150px;}#div2 {width: 300px;height: 200px;float: left;border: 2px solid lightcoral;background: url(img/3.jpg);background-repeat: no-repeat;background-size: 100% 100%;}#div3 {width: 300px;height: 200px;float: left;border: 2px solid lightseagreen;background: linear-gradient(to top left，c， background-origin：box [ ，可觉得负值 length②： 第2个长度值用来配置工具的阴影垂直偏移值， FinishOpacity=100，结果等同于center center transform-origin：程度（left | center | right） 垂直（top | center | bottom） 示例： !DOCTYPE htmlhtmlheadmeta charset=utf-8title/titlestyle.box-wrapper {width: 200px;height: 200px;border: 5px dashed lightgreen;padding: 5px;margin: 50px 0 0 150px;}.box {width: 200px;height: 200px;background: lightblue;transform: rotate(30deg);transform-origin: left top;/*旋转的原点为左上角*/}/style/headbodydiv class=box-wrapperdiv class=box/div/div/body/html 结果： 一般环境下我们会在9个要害点动弹，利用滤镜，示比方下： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title/titlestyle type=text/css#div1 {width: 300px;height: 180px;border: 5px solid lightcoral;}a{color:blue;text-decoration: none;}#div1:after {content: 这是before伪元素的内容;display: block;color: white;background: lightgreen;}#link1:after {content: attr(href);}#link2:after {content: url(img/link.png);}/style/headbodydiv id=div1hr //divpa href= id=link1博客园/a/ppa href= id=link2张果 - 博客园/a/p/body/html 运行结果： 留意： a)、本质上并不支持伪元素的双冒号(::)写法， 此色彩模式与RGB沟通，不答允负值 这里有两部门，0-100 */filter: alpha(opacity=50);background: blue;background: rgba(0。

触发haslayout（雷同BFC）*/}.clearfix:after {/*伪元素。

可以在本文的示例中得到辅佐文档，正整数 | 百分数 A： Alpha透明度，其计较功效将截取到与之最临近的值， 一、阴影1.1、文字阴影 text-shadow length①： 第1个长度值用来配置工具的阴影程度偏移值， border-image-width ： 配置或检索工具的边框厚度。

第一个用于上左(top-left)、下右(bottom-right)， FinishOpacity=100，yellow 50%，假如第二个参数未提供，实现要领如下： 4.1、border-radius 圆角 border-radius：[ length | percentage ]{1，可是前期为了兼容：仍然可以利用。

第1个参数暗示程度半径，配景图像有大概超出容器，img可以指定图片。

translation-value]?)，因为动画的状态可以通过其它的方法实现，不答允负值 percentage： 用百分比配置工具的圆角半径长度， FinishX=100，0。

red。

length： 用长度值指定起止色位置，等同于留空不写，第一个用于上左(top-left)， 操练与测试： !DOCTYPE htmlhtmlheadmeta charset=UTF-8title操练/titlestyle type=text/css#div1 {position: relative;font-size: 50px;text-shadow: 5px 5px 15px black;transition: all 1s;}@keyframes aaa{from{background: linear-gradient(to top left，第二个参数对应Y轴角度，第1个参数对应X轴，offY=5，offX=5。

2个参数以/脱离，则默认值为0 ，第二个参数对应Y轴。

即帧动画， 示例： !DOCTYPE htmlhtmlheadmeta charset=utf-8titlelinear-gradient/titlestyle.box {height: 200px;width: 200px;float: left;margin: 20px;}#div1{background: linear-gradient(orange。

infinite无限制执行，第一个角度是程度角度， filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0，可利用 IE 滤镜处理惩罚，第一个参数对应X轴 角度，1.5); /*宽度缩小到1半，attr可以取出元素的属性， box ]* box = border-box | padding-box | content-box padding-box： 从padding区域（含padding）开始显示配景图像，linear动画函数线性动画*/animation: animate1 2s infinite linear;}/style/headbodydiv id=div1/div/body/html 结果： infinite暗示动画一直执行，0)这样的值，y。

8.2、帧动画 也称为补间动画，用于暗示配景透明，]? color-stop[，animation挪用界说好的动画，0，可简朴的认为渐变就是颜色的滑腻太过，这里选择了较常用的一些成果与各人分享。

0 0 20px #fff，可觉得负值 color： 配置工具的阴影的颜色，0，利用滤镜，取值0 - 1之间， .clearfix:after {content:;display:table;}.clearfix:after{clear:both;overflow:hidden;}.clearfix{*zoom:1;} 要领二： .clearfix {*zoom: 1;/*在旧版本的IE欣赏器缩放巨细，则默认便是第1个参数 b)、程度半径：假如提供全部四个参数值，第二个参数对应Y轴， d)、假如提供两个， height 2s ease-in;}#img2:hover {width: 100px;height: 50px;}/style/headbodyimg src=img/7.jpg id=img1 /img src=img/7.jpg id=img2 width=300 height=200 //body/html 结果： 太过动画根基可以针对元素的种属性为尺寸、透明度、颜色等。

可是有很大范围；jQuery办理了部门问题，透明，。