CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。
在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。
前缀浏览器-webkitchrome和safari-mozfirefox-msIE-oopera注释:在写各种前缀时,原始样式也不要缺少div{transform:rotate(30deg);}
transform详细介绍:http://blog.csdn.net/cysear/article/details/47315139
text-shadow: h-shadow v-shadow blur color;
水平阴影,垂直阴影,模糊距离,阴影颜色(必须可负,必须可负,可选,可选)注释:text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
p {word-wrap:break-word;}
允许对长单词进行拆分,并换行到下一行CSS3边框属性:
- border-radius
- box-shadow
- border-image
Firefox、Chrome 以及 Safari 支持所有新的边框属性。Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。
Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。
向 div 元素添加圆角
div{border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */}
向 div 元素添加方框阴影
div{box-shadow: 10px 10px 5px #888888;}
使用图片创建围绕 div 元素的边框
div{border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; -o-border-image:url(border.png) 30 30 round; }
通过 CSS3 的 border-image 属性,您可以使用图片来创建边框:
用于创建上面的边框的原始图片:
div{border-image:url(border.png) 30 30 stretch;-moz-border-image:url(border.png) 30 30 stretch; -webkit-border-image:url(border.png) 30 30 stretch; -o-border-image:url(border.png) 30 30 stretch; }
在这里,图片被拉伸以填充该区域。
CSS3 背景属性:
- background-size
- background-origin
使用多重背景图片。
CSS3 background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div{background:url(bg_flower.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; background-origin:content-box;}
规定背景的绘制区域:
div{background-color:yellow;background-clip:content-box;
}
为 body 元素设置两幅背景图片
body{ background-image:url(bg_flower.gif),url(bg_flower_2.gif);}
CSS3 @font-face 规则
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3,web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的。
使用您需要的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
实例
<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); }div{font-family:myFirstFont;}</style>
CSS3 多列
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!
在本章中,您将学习如下多列属性:
- column-count
- column-gap
- column-rule
把 div 元素中的文本分隔为三列:
div{-moz-column-count:3; -webkit-column-count:3; column-count:3;
}
规定列之间 40 像素的间隔:
div{-moz-column-gap:40px;-webkit-column-gap:40px;column-gap:40px;
}
规定列之间的宽度、样式和颜色规则:
div{-moz-column-rule:3px outset #ff0000;-webkit-column-rule:3px outset #ff0000;column-rule:3px outset #ff0000;}