HTML5+CSS3新增内容总结！！！！！绝对干货
说到H5C3会不会觉得东西好多啊，今天就整理了一份总结性的内容；
CSS3选择器有哪些？
答：属性选择器、伪类选择器、伪元素选择器。
CSS3新特性有哪些？
答：1.颜色：新增RGBA，HSLA模式
2. 文字阴影（text-shadow、）
3. 边框： 圆角（border-radius）边框阴影： box-shadow
4. 盒子模型：box-sizing
5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6. 渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画
9. 在CSS3中唯一引入的伪元素是 ：selection.
10. 媒体查询，多栏布局
11. border-image
12. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D转换
CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个
元素的每个
p:last-of-type 选择属于其父元素的最后
元素的每个
p:only-of-type 选择属于其父元素唯一的
元素的每个
p:only-child 选择属于其父元素的唯一子元素的每个
元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。 :enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？（web前端学习交流群： 禁止闲聊，非喜勿进！）
如何区分 HTML 和 HTML5？
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation支持HTML5新标签：
IE8/IE7/IE6支持通过document.方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点5.9 CSS3新增属性 - 淘宝店铺装修完全自学教程 - 平面设计学院 - 勤学网
&&&5.9 CSS3新增属性
&当前线路为
网络好像不太流畅,试试其他线路
切换线路若仍有问题
时间：00:00&|
讲解CSS3新增的圆角、阴影及不透明度等参数设置
提示:点击笔记时间可继续观看
笔记时间： 31:19
透明度opacity可以 同时控制调节文字以及背景 的透明度
笔记时间： 31:17
颜色透明度 ·三原色配合透明度 形如：color:rgba(255,255, 0,0.5)
·a代表的alpha,表示透明度，取值范围是0-1，如果是0.5代表半透明（可以调节背景颜色透明度 或单纯形状的透明度）
花开柳相依
笔记时间： 27:53
pacity：所有元素透明度的意思，取值在0到1，~color：rgba（255，255，0，0.5）a代表alpha通道，表示透明度，取值在0——1之间，0.5代表半透明
花开柳相依
笔记时间： 01:18
border-radius圆角 一个值是4个角 两个是 上下
三个是 上 左右 下
四个 上右下左顺时针 box-shadow 阴影 有6个参数
x轴偏移 y轴偏移 阴影模糊半径 阴影扩展半径 阴影颜色 阴影类型
笔记时间： 18:32
阴影box-shadow
有六个参数：X轴偏移 Y轴偏移 阴影模糊半径 阴影扩展半径 阴影颜色 阴影类型。例如：box-shadow:10px 10 px 5px red inset(内阴影）；
第一章 认识淘宝后台管理界面
第二章 简易的页面装修
第三章 使用生成工具装修家居类店铺实战案例
第四章 店铺高级装修需要学习的HTML代码
第五章 店铺高级装修需要学习的CSS样式
第六章 使用代码装修自定义店铺
第七章 使淘宝开放平台widget规范和SNS组件
第八章 装修店铺内页及总结
最后回复人/回复时间
还没有学员在学习本节课程时遇到问题
课程附件列表：
187_淘宝店铺装修零基础到精通教程附件集
?350元photoshop CS6零基础入门教程&通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3 @keyframes 规则
如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
浏览器支持
浏览器支持
@keyframes
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
@keyframes myfirst
from {background:}
to {background:}
@-moz-keyframes myfirst
from {background:}
to {background:}
@-webkit-keyframes myfirst
from {background:}
to {background:}
@-o-keyframes myfirst
from {background:}
to {background:}
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
把 &myfirst& 动画捆绑到 div 元素，时长：5 秒：
animation: myfirst 5s;
-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s;
-o-animation: myfirst 5s;
注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。
什么是 CSS3 中的动画？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 &from& 和 &to&，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{background:}
{background:}
{background:}
100% {background:}
@-moz-keyframes myfirst
{background:}
{background:}
{background:}
100% {background:}
@-webkit-keyframes myfirst
{background:}
{background:}
{background:}
100% {background:}
@-o-keyframes myfirst
{background:}
{background:}
{background:}
100% {background:}
改变背景色和位置：
@keyframes myfirst
{background: left:0 top:0}
{background: left:200 top:0}
{background: left:200 top:200}
{background: left:0 top:200}
100% {background: left:0 top:0}
@-moz-keyframes myfirst
{background: left:0 top:0}
{background: left:200 top:0}
{background: left:200 top:200}
{background: left:0 top:200}
100% {background: left:0 top:0}
@-webkit-keyframes myfirst
{background: left:0 top:0}
{background: left:200 top:0}
{background: left:200 top:200}
{background: left:0 top:200}
100% {background: left:0 top:0}
@-o-keyframes myfirst
{background: left:0 top:0}
{background: left:200 top:0}
{background: left:200 top:200}
{background: left:0 top:200}
100% {background: left:0 top:0}
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性：
规定动画。
所有动画属性的简写属性，除了 animation-play-state 属性。
规定 @keyframes 动画的名称。
规定动画完成一个周期所花费的秒或毫秒。默认是 0。
规定动画的速度曲线。默认是 &ease&。
规定动画何时开始。默认是 0。
规定动画被播放的次数。默认是 1。
规定动画是否在下一周期逆向地播放。默认是 &normal&。
规定动画是否正在运行或暂停。默认是 &running&。
规定对象动画时间之外的状态。
下面的两个例子设置了所有动画属性：
运行名为 myfirst 的动画，其中设置了所有动画属性：
animation-name:
animation-duration: 5s;
animation-timing-function:
animation-delay: 2s;
animation-iteration-count:
animation-direction:
animation-play-state:
-moz-animation-name:
-moz-animation-duration: 5s;
-moz-animation-timing-function:
-moz-animation-delay: 2s;
-moz-animation-iteration-count:
-moz-animation-direction:
-moz-animation-play-state:
-webkit-animation-name:
-webkit-animation-duration: 5s;
-webkit-animation-timing-function:
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count:
-webkit-animation-direction:
-webkit-animation-play-state:
-o-animation-name:
-o-animation-duration: 5s;
-o-animation-timing-function:
-o-animation-delay: 2s;
-o-animation-iteration-count:
-o-animation-direction:
-o-animation-play-state:
与上面的动画相同，但是使用了简写的动画 animation 属性：
animation: myfirst 5s linear 2
-moz-animation: myfirst 5s linear 2
-webkit-animation: myfirst 5s linear 2
-o-animation: myfirst 5s linear 2CSS3新添加了background的几个属性_百度文库
赠送免券下载特权
10W篇文档免费专享
部分付费文档8折起
每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
CSS3新添加了background的几个属性
阅读已结束，下载本文需要
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢}