CSS3新技术.docx
《CSS3新技术.docx》由会员分享，可在线阅读，更多相关《CSS3新技术.docx（13页珍藏版）》请在冰豆网上搜索。
CSS3新技术
作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。
这里是一些CSS3相关的文章和资源，不管你是第一次准备去认识CSS3，还是已经略知皮毛，下面这些资源都将有助你更好的学习和理解CSS3。
英文CSS3资源
CSS3.info
看域名就知道，这是一个专门介绍CSS3的网站。
所有你想了解的有关CSS3的信息，都能在这里找到。
CSS
又一个专门介绍CSS3的网站，包含各种CSS3参考文章和教程。
IntroductiontoCSS3
W3C官方对CSS3的各种详细介绍。
CSS3中的几个有趣的新技术:
圆角、个别圆角、不透明度、阴影和调整元素大小
CSS3 边框效果
圆角
CSS3新功能中最常用的一项是圆角效果，标准HTML方块对象是90度方角的，CSS3可以帮你实现圆角。
Html代码
-moz-border-radius:
20px;
-webkit-border-radius:
20px;
-moz-border-radius:
20px;
-webkit-border-radius:
20px;
甚至单个角也可以实现圆角，不过Mozilla和Webkit的语法稍有不同。
Html代码
-moz-border-radius-topleft:
20px;
-moz-border-radius-topright:
20px;
-moz-border-radius-bottomleft:
10px;
-moz-border-radius-bottomright:
10px;
-webkit-border-top-rightright-radius:
20px;
-webkit-border-top-left-radius:
20px;
-webkit-border-bottom-left-radius:
10px;
-webkit-border-bottom-rightright-radius:
10px;
-moz-border-radius-topleft:
20px;
-moz-border-radius-topright:
20px;
-moz-border-radius-bottomleft:
10px;
-moz-border-radius-bottomright:
10px;
-webkit-border-top-rightright-radius:
20px;
-webkit-border-top-left-radius:
20px;
-webkit-border-bottom-left-radius:
10px;
-webkit-border-bottom-rightright-radius:
10px;
多层边框
border的另一个非常帮的特性是使用gradientcolors，而不是用图片：
Html代码
bordercolor{
border:
8px solid #000;
-moz-border-bottom-colors:
#0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-top-colors:
#0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-left-colors:
#0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
-moz-border-right-colors:
#0fff09 #00fff2 #00ff00 #ffd #ff0 #aaa #bbb #ccc;
width:
200px;
}
bordercolor{
border:
8pxsolid#000;
-moz-border-bottom-colors:
#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
-moz-border-top-colors:
#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
-moz-border-left-colors:
#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
-moz-border-right-colors:
#0fff09#00fff2#00ff00#ffd#ff0#aaa#bbb#ccc;
width:
200px;
}
边框图片
一个令人兴奋的CSS3新的border特性是支持border-image。
这样你就能为每一个独立的角和边框定义一个图片。
Html代码
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image
border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image
css3阴影效果
阴影效果曾让Web设计师既爱又恨，现在，有了CSS3，你不再需要Photoshop
Html代码
-webkit-box-shadow:
10px 10px 25px #ccc;
-moz-box-shadow:
10px 10px 25px #ccc;
box-shadow:
10px 10px 25px #ccc;
-webkit-box-shadow:
10px10px25px#ccc;
-moz-box-shadow:
10px10px25px#ccc;
box-shadow:
10px10px25px#ccc;
前两个属性设置阴影的X/Y位移，这里分别是10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。
文字阴影也可以这样设置：
Html代码
1.text-shadow:
2px 2px 5px #ccc;
text-shadow:
2px2px5px#ccc;
css调整元素的尺寸
在最新版本的CSS中，调整元素的尺寸已经成为可能（不过目前仅Safari支持）
使用这个代码以后，我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。
代码依然很简单，可以说仅需要一行代码，当然你还可以配合使用一些曾经使用过的属性，比如”max-width”,“max-height”,“min-width”和“min-height”.
Html代码
#resize {
background-color:
#fff;
border:
1px solid #000;
resize:
both;
overflow:
auto;
}
#resize{
background-color:
#fff;
border:
1pxsolid#000;
resize:
both;
overflow:
auto;
}
在这里主要说一下resize和overflow属性，resize:
both;的意思就是所有边都可以调整尺寸，它的值还有horizontal和vertical，顾名思义，就是横向和纵向。
而overflow是为了配合resize工作的，在这里使用auto.
CSS3的方式修改不透明度
现在你可以按惯例编写几行代码来实现不透明度的效果（hack）。
不过CSS3简化了这个流程。
这行代码很好记，仅仅是“opacity:
value;”
Html代码
#opacity {
background-color:
#000;
opacity:
0.3;
}
#opacity{
background-color:
#000;
opacity:
0.3;
}
详解CSS3中的属性选择符
在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。
CSS3中的很多选择符已经在现代浏览器中得到很好的应用（IE8.0中也已经部分地支持了CSS3），但是这些基本功能上的支持还远远不能满足开发者使用的要求。
但是在某些情况下使用他们可以带来很好的超前体验，因此我认为了解一下CSS3新增选择符是如何使用还是有益处的。
选择符类型
表达式
描述
子串匹配的属性选择符
E[att^="val"]
匹配具有att属性、且值以val开头的E元素
子串匹配的属性选择符
E[att$="val"]
匹配具有att属性、且值以val结尾的E元素
子串匹配的属性选择符
E[att*="val"]
匹配具有att属性、且值中含有val的E元素
结构性伪类
E:
root
匹配文档的根元素。
在HTML中，根元素永远是HTML
结构性伪类
E:
nth-child（n）
匹配父元素中的第n个子元素E
结构性伪类
E:
nth-last-child（n）
匹配父元素中的倒数第n个结构子元素E
结构性伪类
E:
nth-of-type（n）
匹配同类型中的第n个同级兄弟元素E
结构性伪类
E:
nth-last-of-type（n）
匹配同类型中的倒数第n个同级兄弟元素E
结构性伪类
E:
last-child
匹配父元素中最后一个E元素
结构性伪类
E:
first-of-type
匹配同级兄弟元素中的第一个E元素
结构性伪类
E:
only-child
匹配属于父元素中唯一子元素的E
结构性伪类
E:
only-of-type
匹配属于同类型中唯一兄弟元素的E
结构性伪类
E:
empty
匹配没有任何子元素（包括text节点）的元素E
目标伪类
E:
target
匹配相关URL指向的E元素
UI元素状态伪类
E:
enabled
匹配所有用户界面（form表单）中处于可用状态的E元素
UI元素状态伪类
E:
disabled
匹配所有用户界面（form表单）中处于不可用状态的E元素
UI元素状态伪类
E:
checked
匹配所有用户界面（form表单）中处于选中状态的元素E
UI元素状态伪类
E:
:
selection
匹配E元素中被用户选中或处于高亮状态的部分
否定伪类
E:
not（s）
匹配所有不匹配简单选择符s的元素E
---->
通用兄弟元素选择器
E~F
匹配E元素之后的F元素
初探CSS3RGBA颜色
浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。
换句话说，很难实现背景颜色透明而文字不透明的效果…直到RGBA颜色的出现这一切将成为现实。
实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可,例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色.
Html代码
background:
rgba（200, 54, 54, 0.5）;
color:
rgba（200, 54, 54, 0.5）;
background:
rgba（200,54,54,0.5）;
color:
rgba（200,54,54,0.5）;
CSS3中的Gird布局
刚刚看了一份W3CCSS3的文档，是关于Gird（网格？
）布局草案的说明。
无论它最终实现是否如草案中的描述，但这个功能本身就已经足够吸引人了。
图中蓝色的线不会出现在实际的网页中。
对于这个布局复杂的三栏网页来说，如果使用CSS3Gird布局的话，我们只需这样写：
Html代码
body { columns:
3; column-gap:
0.5in; }
img { float:
page top right; width:
3gr; }
body{columns:
3;column-gap:
0.5in;}
img{float:
pagetopright;width:
3gr;}
其中，body部分声明页面为3栏，栏间距为0.5英寸；img中float属性指明图片浮动位置为页面的右上角（CSS3定位好强大-__-），而宽度为3个栏宽。
只需这样两行CSS，我们就可以实现这个复杂的布局了。
真的很神奇。
Gird布局是好，不过如果你认为它很简单的话，你就大错特错了。
看看w3c中关于它的介绍，你会发现理解它的意义不亚于看懂天书。
好在还是个草案，但愿它到了正式版的时候，能够更加简单易用点。
Gird布局应用很广泛，最简单的例子就是内容的分栏显示。
但这个CSS3特性目前还没有任何浏览器可以支持它。
谁要是能第一个支持它（以及其它CSS3草案），那就酷毙了。
不知道，最近异常低调的IE8，会不会是这第一个吃螃蟹的人呢？
CSS3动画也逐渐受到大家的关注。
这次有幸修改淘宝网全站页头，小小地应用了下（详见
以下是自己的一点理解，希望能对大家有所帮助。
…
淘宝案例解析
需求：
鼠标移动到菜单上时旋转箭头，且给支持CSS3的浏览器加上旋转动画。
源码请查看demo源文件。
demo（
…
关于CSS3动画
从（http:
//www.w3.org/Style/CSS/current-work）可以看出，CSS动画涉及的知识点包括CSS2DTransformations,CSS3DTransformations,CSSTransitions,CSSAnimations。
Transformation补充定义了width,height,left,top等之外的一些可用于实现动画的属性，如rotate,scale,skew。
Transition和Animation用于定义动画的过程。
其中Transition可以实现简单的动画；Animation则可以通过设定多个关键帧实现相对复杂的动画。
…
CanIUse?
兼容性
（数据来自
IE
Firefox
Safari
Chrome
Opera
CSS2DTransform
no
3.5
3.2
2.0
10.5
CSS3DTransform
no
no
4.*（Mac）
no
no
CSSTransition
no
3.7
3.2
2.0
10.5
CSSAnimation
no
no
4.0
2.0
no
可以看到，CSSAnimation目前只有Webkit内核浏览器支持，目前只能自己玩玩；而Transition用来做渐进增强则较为合适。
…
一个简单的例子
需求：
让一个div元素在鼠标移上去时变大1倍，旋转180度，且背景由红变蓝。
htmlcode:
:
csscode:
:
div{
position:
absolute;
left:
100px;
top:
100px;
width:
100px;
height:
100px;
background:
red;
/*定义动画的过程*/
-webkit-transition:
-webkit-transform.5sease-in,background.5sease-in;
-moz-transition:
-moz-transform.5sease-in,background.5sease-in;
-o-transition:
-o-transform.5sease-in,background.5sease-in;
transition:
transform.5sease-in,background.5sease-in;
}
div:
hover{
/*定义动画的状态*/
-webkit-transform:
rotate（180deg）scale
（2）;
-moz-transform:
rotate（180deg）scale
（2）;
-o-transform:
rotate（180deg）scale
（2）;
-transform:
rotate（180deg）scale
（2）;
background:
blue;
}
demo（（noIE）
…
无奈的浏览器前缀
这是个令人非常痛苦的问题，因为不得不针对每个浏览器copy一遍重复代码。
值得注意的是无前缀的标准代码需放在最后。
假如几年后某个属性成为标准，被浏览器默认支持了，这行代码会覆盖前面的定义，使得浏览器可以优先使用他。
…
稍微复杂点的例子（css3animation）
需求：
让一个div元素在点击后变大1倍，旋转180度，且背景由红变蓝；然后向右移动400px。
源码请查看demo源文件。
demo（（Safari,Chromeonly）
…
惊艳！
CSS3DTransformations
见livedemo（http:
//www.satine.org/research/webkit/snowleopard/snowstack.html）（MacSafariOnly，类似于
PS:
MacSafari的3DTransform、2DTransform和Opacity等视觉效果都是跑在GPU上的，为此我还特地验证下了WinSafari，果然不支持。
…
相关资料
webkitblog介绍animation/2dtransforms/3dtransforms的三篇文章
http:
//webkit.org/blog/138/css-animation/
http:
//webkit.org/blog/130/css-transforms/
http:
//webkit.org/blog/386/3d-transforms/
W3组织的CSS规范集
http:
//www.w3.org/Style/CSS/current-work
苹果官方关于CSS视觉效果的文档
cssanimation的兼容性数据来源
3dtransform的运用app
http:
//www.satine.org/research/webkit/snowleopard/snowstack.html
http:
//css-
css3动画的应用
css3animation的入门应用：
钟的实现
http:
//g-zone.org/test/g-clock/index.html
…
升级会员 