css3教程

1.css3边框

(1).圆角边框：border-radius 属性用于创建圆角

例：向 div 元素添加圆角

div

{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}(2).边框阴影：box-shadow 用于向方框添加阴影

例：向 div 元素添加方框阴影

div
{
box-shadow: 10px 10px 5px #888888;

}

(3).边框图片：border-image 属性可以使用图片来创建边框

例：使用图片创建围绕 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 */

}

2.css3背景

(1).background-size 属性：规定背景图片的尺寸

例：调整背景图片的大小

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;

}

(2).background-origin 属性：规定背景图片的定位区域

例：在 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;

}

(3).CSS3 多重背景图片：CSS3 允许元素使用多个背景图像

例：

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);

}

3.CSS3 文本效果

(1).文本阴影：text-shadow 可向文本应用阴影

例：向标题添加阴影

h1
{
text-shadow: 5px 5px 5px #FF0000;

}

(2).自动换行：word-wrap 属性允许文本强制文本进行换行

例：允许对长单词进行拆分，并换行到下一行

p {word-wrap:break-word;}