css3新特性1——文本效果&边框&背景&多列

什么是CSS3？

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

注释：在写各种前缀时，原始样式也不要缺少

div
{
transform:rotate(30deg);
}

transform详细介绍：/article/10703475.html

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; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：



用于创建上面的边框的原始图片：

div
{
border-image:url(border.png) 30 30 stretch;
-moz-border-image:url(border.png) 30 30 stretch; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
}

在这里，图片被拉伸以填充该区域。

CSS3 背景属性：

background-size
background-origin

使用多重背景图片。

CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

在 content-box 中定位背景图片：

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

规定背景的绘制区域：

div
{
background-color:yellow;
[code]background-clip:content-box;

}[/code]

为 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'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

CSS3 多列

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！

在本章中，您将学习如下多列属性：

column-count
column-gap
column-rule

把 div 元素中的文本分隔为三列：

div
{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
[code]column-count:3;

}[/code]

规定列之间 40 像素的间隔：

div
{
-moz-column-gap:40px;		/* Firefox */
-webkit-column-gap:40px;	/* Safari 和 Chrome */
[code]column-gap:40px;

}[/code]

规定列之间的宽度、样式和颜色规则：

div
{
-moz-column-rule:3px outset #ff0000;	/* Firefox */
-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
column-rule:3px outset #ff0000;
}