CSS教程

CSS3教程：

CSS3边框：

• border-radius
• box-shadow
• border-image
  border-radius常用于创建圆角：

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

效果：

box-shadow用于向方框添加阴影：

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

效果：

用border-image可以使边框变为图片

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 */
}

css背景：

background-size用于改变背景图片的尺寸；它有两个属性：长和宽；
background-origin用于规定背景图片的定位区域，它有三个值：content-box、padding-box 或 border-box ；

CSS3文本效果：

在 CSS3 中，text-shadow 可向文本应用阴影，您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

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

word-wrap用于对单词拆分
在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：

p{word-wrap：break-word;}

CSS3 2D,3D转换：

translate（x,y）	对元素进行位置移动，
rotate()	元素顺时针旋转给定角度，负值为逆时针
scale（X,Y）	控制元素的长和宽
skew（X,Y）	根据给定的X轴和Y轴翻转给定角度
rotateX（）	元素绕X轴旋转，3D
rotateY()	元素绕Y轴旋转，3D

以上均是transform的属性

CSS3字体：

在新的 @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 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}
div:hover
{
width:300px;
}

**transform有4个属性：

transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”
transition-delay	规定过渡效果何时开始。默认是 0
transition	简写属性，用于在一个属性中设置四个过渡属性

CSS动画：

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

绑定后就可用@keyframes创建动画效果：

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性
animation-name	规定 @keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认为0
animation-timing-function	规定动画的速度曲线。默认是 “ease”
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数。默认是 1
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”
animation-fill-mode	规定对象动画时间之外的状态

CSS多列：

• column-count；规定元素应该被分隔的列数

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

• column-gap；规定列之间的间隔

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

• column-rule 属性设置列之间的宽度、样式和颜色规则

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

CSS用户界面：

resize：
在 CSS3，resize 属性规定是否可由用户调整元素尺寸
Box Sizing:
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容
Outline Offset
outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：

• 轮廓不占用空间
• 轮廓可能是非矩形