Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS3 animation-delay 属性 实例 等待两秒，然后开始动画： [mycode3 type='css'] animation-delay:2s; -webkit-animation-delay:2s; /* Safari 和 Chrome */ [/mycode3] 尝试一下 » 在此页底部有更多的例子。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-..
CSS3 animation-direction 属性 CSS 参考手册 实例 先执行一遍动画，然后再反向执行一遍动画： animation-direction:alternate; -webkit-animation-direction:alternate; /* Safari 和 Chrome */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 ..
CSS3 animation-duration 属性 实例 设置动画在两秒内完成: [mycode3 type='css'] animation-duration:2s; -webkit-animation-duration:2s; /* Safari 和 Chrome */ [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit..
CSS3 animation-fill-mode 属性 CSS 参考手册 实例 把物体动画地从一个地方移动到另一个地方，并让它停留在那里： [mycode3 type='css'] animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */ [/mycode3] 尝试一下 » ..
CSS3 animation-iteration-count 属性 实例 播放三次动画： animation-iteration-count:3; -webkit-animation-iteration-count:3; /*Safari and Chrome*/ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的..
CSS3 @keyframes 规则 实例 使一个div元素逐渐移动200像素： @keyframes mymove { from {top:0px;} to {top:200px;} }@-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } 尝试一下 » 在此页底部有更多的例子。..
CSS3 animation-name 属性 实例 为 @keyframes 动画指定一个名称： [mycode3 type='css'] animation-name:mymove; -webkit-animation-name:mymove; /* Safari 和 Chrome */ [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -web..
CSS3 animation-play-state 属性 实例 暂停动画： animation-play-state:paused; -webkit-animation-play-state:paused; /* Safari 和 Chrome */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前..
CSS3 animation-timing-function 属性 实例 从开始到结束以相同的速度播放动画: [mycode3 type='css'] animation-timing-function:linear; -webkit-animation-timing-function:linear; /* Safari and Chrome */ [/mycode3] 尝试一下 » 在此页底部有更多的..
CSS3 animation（动画） 属性 实例 使用简写属性把 animation 绑定到一个<div> 元素： [mycode3 type='css'] div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ } [/mycode3] ..
CSS3 appearance 属性 实例 使 div 元素看上去像一个按钮： div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:button; /* Safari and Chrome */ } 尝试一下 » 浏览器支持 所有主流浏览器都不支持 appearance 属性..
CSS3 backface-visibility 属性 实例 隐藏旋转 div 元素的背面：: [mycode3 type='css'] div { backface-visibility:hidden; -webkit-backface-visibility:hidden; /* Chrome 、Safari */ -moz-backface-visibility:hidden; /..
CSS3 background-clip 属性 实例 指定绘图区的背景： [mycode3 type='css'] div { background-color:yellow; background-clip:content-box; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS3 background-origin 属性 实例 内容框相对定位的背景图片： div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 尝试一下 » 浏览器支持..
CSS3 background-size 属性 实例 指定背景图像的大小： [mycode3 type='css'] div { background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; } [/mycode3] 尝试一下 » 在此页底部有更多的例子。 浏览器支持 ..
CSS background 属性 实例 在一个div元素中设置多个背景图像（并指定他们的位置）： [mycode3 type='css'] body { background: #00ff00 url('smiley.gif') no-repeat fixed center; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览..
CSS3 border-bottom-left-radius 属性 实例 为div元素的左下角添加圆角边框： [mycode3 type='css'] div { border:2px solid; border-bottom-left-radius:2em; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit..
CSS3 border-bottom-right-radius 属性 实例 为div元素的右下角添加圆角边框： [mycode3 type='css'] div { border:2px solid; border-bottom-right-radius:2em; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -..
CSS3 border-image-outset 属性 实例 设置border-img-outset属性： [mycode3 type='css'] div { border-image-source: url(border.png); border-image-outset: 30 30; } [/mycode3] 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 ..
CSS3 border-image-repeat 属性 实例 设置重复图像的方式： div { border-image-source: url(border.png); border-image-repeat: repeat; } 尝试一下 » 定义和使用 border-i..
CSS3 border-image-slice 属性 实例 指定图像的边界向内偏移： [mycode3 type='css'] div { border-image-source: url(border.png); border-image-slice: 50% 50%; } [/mycode3] 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS3 border-image-source 属性 实例 使用图像作为div元素的边框： div { border-image-source: url(border.png); } 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 border-image..
CSS3 border-image-width 属性 实例 指定图像边界的宽度： [mycode3 type='css'] div { border-image-source: url(border.png); border-image-width: 30 30; } [/mycode3] 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 ..
CSS3 border-image 属性 实例 指定作为div元素周围边框的图像： [mycode3 type='css'] #borderimg { -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11..