CSS3新技术.docx

1、CSS3新技术作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。这里是一些CSS3相关的文章和资源，不管你是第一次准备去认识CSS3，还是已经略知皮毛，下面这些资源都将有助你更好的学习和理解CSS3。英文CSS3资源 CSS3.info 看域名就知道，这是一个专门介绍CSS3的网站。所有你想了解的有关CSS3的信息，都能在这里找到。CSS 又一个专门介绍CSS3的网站，包含各种CSS3参考文章和教程。Introduction to CSS3 W3C官方对CSS3的各种详细介绍。CSS3中的几个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小 CSS3 边框效果

2、圆角 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-r

3、adius-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-b

4、order-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代码bordercol

5、or 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:

6、200px; 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: #0fff

7、09 #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

8、-image border-bottom-right-imageborder-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，你不再需要 PhotoshopHtml代码-we

9、bkit-box-shadow:10px10px25px#ccc; -moz-box-shadow:10px10px25px#ccc; box-shadow:10px10px25px#ccc;-webkit-box-shadow: 10px 10px 25px #ccc; -moz-box-shadow: 10px 10px 25px #ccc; box-shadow: 10px 10px 25px #ccc; 前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置： Html代码 1.text-shadow:

10、2px2px5px#ccc;text-shadow: 2px 2px 5px #ccc; css调整元素的尺寸 在最新版本的CSS中，调整元素的尺寸已经成为可能（不过目前仅Safari支持）使用这个代码以后，我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单，可以说仅需要一行代码，当然你还可以配合使用一些曾经使用过的属性，比如”max-width”, “max-height”, “min-width”和 “min-height”.Html代码#resize background-color:#fff; border:1pxsolid#000; resize:b

11、oth; overflow:auto; #resize background-color: #fff;border: 1px solid #000;resize: both;overflow: auto;在这里主要说一下resize和overflow属性，resize:both;的意思就是所有边都可以调整尺寸，它的值还有horizontal 和vertical ，顾名思义，就是横向和纵向。而overflow是为了配合resize工作的，在这里使用auto.CSS3的方式修改不透明度 现在你可以按惯例编写几行代码来实现不透明度的效果(hack)。不过CSS3简化了这个流程。这行代码很好记，仅仅是

12、 “opacity: value;”Html代码#opacity background-color:#000; opacity:0.3; #opacity background-color: #000;opacity: 0.3; 详解CSS3中的属性选择符 在CSS3中还有功能更加强大的选择符等待我们去发掘和使用。CSS3中的很多选择符已经在现代浏览器中得到很好的应用（IE8.0中也已经部分地支持了 CSS3），但是这些基本功能上的支持还远远不能满足开发者使用的要求。但是在某些情况下使用他们可以带来很好的超前体验，因此我认为了解一下CSS 3新增选择符是如何使用还是有益处的。选择符类型表达式描

13、述子串匹配的属性选择符Eatt=val匹配具有att属性、且值以val开头的E元素子串匹配的属性选择符Eatt$=val匹配具有att属性、且值以val结尾的E元素子串匹配的属性选择符Eatt*=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)匹

14、配同类型中的倒数第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元

15、素UI元素状态伪类E:checked匹配所有用户界面（form表单）中处于选中状态的元素EUI元素状态伪类E:selection匹配E元素中被用户选中或处于高亮状态的部分否定伪类E:not(s)匹配所有不匹配简单选择符s的元素E 通用兄弟元素选择器E F匹配E元素之后的F元素初探CSS3 RGBA颜色 浏览器的透明一直无法实现 单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现 背景颜色透明 而文字不透明的效果直到 RGBA 颜色的出现这一切将成为现实。实现这样的效果非常简单，设置颜色的时候我们使用标准的 rgba() 单位即可, 例如 rgba(255,0

16、,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 布局 刚刚看了一份 W3C CSS3 的文档，是关于 Gird （网格？）布局草案的说明。无论它最终实现是否如草案中的描述，但这个功能本身就已经足够吸引人了。图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说，如果使用

17、CSS3 Gird 布局的话，我们只需这样写：Html代码bodycolumns:3;column-gap:0.5in; imgfloat:pagetopright;width:3gr;body columns:3; column-gap:0.5in; img float:page top right; width:3gr; 其中，body 部分声明页面为 3 栏，栏间距为 0.5英寸；img 中 float 属性指明图片浮动位置为页面的右上角（CSS3 定位好强大 -_-），而宽度为 3 个栏宽。只需这样两行 CSS，我们就可以实现这个复杂的布局了。真的很神奇。Gird 布局是好，不过如果你

18、认为它很简单的话，你就大错特错了。看看 w3c 中关于它的介绍 ，你会发现理解它的意义不亚于看懂天书。好在还是个草案，但愿它到了正式版的时候，能够更加简单易用点。Gird 布局应用很广泛，最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它（以及其它 CSS3 草案），那就酷毙了。不知道，最近异常低调的 IE8，会不会是这第一个吃螃蟹的人呢？CSS3动画也逐渐受到大家的关注。这次有幸修改淘宝网全站页头，小小地应用了下(详见以下是自己的一点理解，希望能对大家有所帮助。淘宝案例解析需求：鼠标移动到菜单上时旋转箭头，且给支持CSS3的浏览器加上旋

19、转动画。源码请查看demo源文件。demo (关于CSS3动画从(http:/www.w3.org/Style/CSS/current-work)可以看出，CSS动画涉及的知识点包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。Transformation 补充定义了width, height, left, top等之外的一些可用于实现动画的属性，如rotate, scale, skew。Transition 和 Animation 用于定义动画的过程。其中Transition

20、可以实现简单的动画；Animation则可以通过设定多个关键帧实现相对复杂的动画。Can I Use? 兼容性(数据来自IEFirefoxSafariChromeOperaCSS 2D Transformno3.53.22.010.5CSS 3D Transformnono4.* (Mac)nonoCSS Transitionno3.73.22.010.5CSS Animationnono4.02.0no可以看到，CSS Animation目前只有Webkit内核浏览器支持，目前只能自己玩玩；而Transition用来做渐进增强则较为合适。一个简单的例子需求：让一个div元素在鼠标移上去时变大

21、1倍，旋转180度，且背景由红变蓝。html code:css code:div position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background: red; /* 定义动画的过程 */ -webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in; -moz-transition: -moz-transform .5s ease-in, background .5s ease-in; -o-transit

22、ion: -o-transform .5s ease-in, background .5s ease-in; transition: transform .5s ease-in, background .5s ease-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); ba

23、ckground: blue;demo ( (no IE)无奈的浏览器前缀这是个令人非常痛苦的问题，因为不得不针对每个浏览器copy一遍重复代码。值得注意的是无前缀的标准代码需放在最后。假如几年后某个属性成为标准，被浏览器默认支持了，这行代码会覆盖前面的定义，使得浏览器可以优先使用他。稍微复杂点的例子(css3 animation)需求：让一个div元素在点击后变大1倍，旋转180度，且背景由红变蓝；然后向右移动400px。源码请查看demo源文件。demo ( (Safari, Chrome only)惊艳！CSS 3D Transformations见live demo (http:/ww

24、w.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only，类似于PS: Mac Safari的3D Transform、2D Transform和Opacity等视觉效果都是跑在GPU上的，为此我还特地验证下了Win Safari，果然不支持。相关资料webkit blog介绍animation/2d transforms/3d transforms的三篇文章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视觉效果的文档css animation的兼容性数据来源3d transform的运用apphttp:/www.satine.org/research/webkit/snowleopard/snowstack.htmlhttp:/css-css3动画的应用css3 animation的入门应用：钟的实现http:/g-zone.org/test/g-clock/index.html