[转]css3

作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。这里是一些CSS3相关的文章和资源，不管你是第一次准备去认识CSS3，还是已经略知皮毛，下面这些资源都将有助你更好的学习和理解CSS3。

 

英文CSS3资源
CSS3.info
看域名就知道，这是一个专门介绍CSS3的网站。所有你想了解的有关CSS3的信息，都能在这里找到。
CSS3.com
又一个专门介绍CSS3的网站，包含各种CSS3参考文章和教程。
Introduction to CSS3
W3C官方对CSS3的各种详细介绍。

 

CSS3中的几个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小

 

CSS3   边框效果

 

圆角

CSS3 新功能中最常用的一项是圆角效果，标准 HTML 方块对象是90度方角的，CSS3 可以帮你实现圆角。

 

 

-moz-border-radius: 20px;
-webkit-border-radius: 20px;

-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 

 

甚至单个角也可以实现圆角，不过 Mozilla 和 Webkit 的语法稍有不同。

-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;  

 

IE9 浏览器也支持 CSS 圆角，IE 9 没有使用私有属性，直接使用 border-radius 定义圆角，border-radius 是定义四个角都是圆角，如果要具体的一个角，可以使用下面四个属性：

border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;

border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;

 

多层边框

border的另一个非常帮的特性是使用gradientcolors，而不是用图片：

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: 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;
}

 

边框图片

一个令人兴奋的CSS3新的border特性是支持border-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

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

 

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #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个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置：

 

text-shadow: 2px 2px 5px #ccc;

text-shadow: 2px 2px 5px #ccc;  

 

css调整元素的尺寸

在最新版本的CSS中，调整元素的尺寸已经成为可能（不过目前仅Safari支持）

使用这个代码以后，我们的元素的右下角会出现一个小三角以提示用户这个元素是可以调整尺寸的。代码依然很简单，可以说仅需要一行代码，当然你还可以配合使用一些曾经使用过的属性，比如”max-width”, “max-height”, “min-width”和 “min-height”.

 

#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
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简化了这个流程。

这行代码很好记，仅仅是 “opacity: value;”

 

#opacity {
background-color: #000;
opacity: 0.3;
}

#opacity {
background-color: #000;
opacity: 0.3;
}

 

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

 

<!-- -->

选择符类型	表达式	描述
子串匹配的属性选择符	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元素

 

初探CSS3 RGBA颜色
浏览器的透明一直无法实现 单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现 背景颜色透明 而文字不透明的效果…直到 RGBA 颜色的出现这一切将成为现实。

 

实现这样的效果非常简单，设置颜色的时候我们使用标准的 rgba() 单位即可, 例如 rgba(255,0,0,0.4) 这样就出现了一个红色同时拥有alpha透明为 0.4的颜色.

 

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 （网格？）布局草案的说明。无论它最终实现是否如草案中的描述，但这个功能本身就已经足够吸引人了。

 

图中蓝色的线不会出现在实际的网页中。对于这个布局复杂的三栏网页来说，如果使用 CSS3 Gird 布局的话，我们只需这样写：

 

body { columns:3; column-gap:0.5in; }
img { float:page top right; 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 布局是好，不过如果你认为它很简单的话，你就大错特错了。看看 w3c 中关于它的介绍 ，你会发现理解它的意义不亚于看懂天书。好在还是个草案，但愿它到了正式版的时候，能够更加简单易用点。

Gird 布局应用很广泛，最简单的例子就是内容的分栏显示。但这个 CSS3 特性目前还没有任何浏览器可以支持它。谁要是能第一个支持它（以及其它 CSS3 草案），那就酷毙了。不知道，最近异常低调的 IE8，会不会是这第一个吃螃蟹的人呢？