CSS3学习

1.CSS3边框

border-radius:创建圆角边框

border-radius:25px;

-moz-border-radius:25px; /* 老的 Firefox */

box-shadow:边框阴影，方向为x，y，z

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

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

border-image:边框图片，IE不支持

2.CSS3背景

background-size:规定背景图片的尺寸，宽、高

background:url(/i/bg_flower.gif);

background-size:63px 100px;

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-repeat:no-repeat;

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

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

background:url(bg_flower.gif);

background-repeat:no-repeat;

background-size:100% 100%;

-webkit-background-origin:content-box; /* Safari */

background-origin:content-box;

background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif);

3.CSS3文本效果

text-shadow：可向文本应用阴影。

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

word-wrap：允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

word-wrap:break-word;

4.CSS3字体

@font-face 下载自定义字体

@font-face

{

font-family: myFirstFont;

src: url('/example/css3/Sansation_Light.ttf')

,url('/example/css3/Sansation_Light.eot'); /* IE9+ */

}

div

{

font-family:myFirstFont;

}

5. CSS3 2D 转换

translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

transform: translate(50px,100px);

-ms-transform: translate(50px,100px);           /* IE 9 */

-webkit-transform: translate(50px,100px);    /* Safari and Chrome */

-o-transform: translate(50px,100px);               /* Opera */

-moz-transform: translate(50px,100px);                  /* Firefox */

rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

transform: rotate(30deg);

-ms-transform: rotate(30deg);                 /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

-o-transform: rotate(30deg);           /* Opera */

-moz-transform: rotate(30deg);               /* Firefox */

skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

transform: skew(30deg,20deg);

-ms-transform: skew(30deg,20deg);       /* IE 9 */

-webkit-transform: skew(30deg,20deg);         /* Safari and Chrome */

-o-transform: skew(30deg,20deg); /* Opera */

-moz-transform: skew(30deg,20deg);    /* Firefox */

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

6. CSS3 3D 转换

rotateX() 方法

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

transform: rotateX(120deg);

-webkit-transform: rotateX(120deg);      /* Safari 和 Chrome */

-moz-transform: rotateX(120deg); /* Firefox */

rotateY() 旋转

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

transform: rotateY(130deg);

-webkit-transform: rotateY(130deg);      /* Safari 和 Chrome */

-moz-transform: rotateY(130deg); /* Firefox */

7. CSS3 过渡

应用于宽度属性的过渡效果，时长为 2 秒：

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

向宽度、高度和转换添加过渡效果：

div

{

transition: width 2s, height 2s, transform 2s;

-moz-transition: width 2s, height 2s, -moz-transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

-o-transition: width 2s, height 2s,-o-transform 2s;

}

8. CSS3 动画

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

div

{

animation: myfirst 5s;

-moz-animation: myfirst 5s;    /* Firefox */

-webkit-animation: myfirst 5s;         /* Safari 和 Chrome */

-o-animation: myfirst 5s;          /* Opera */

}

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

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

}

9. CSS3 多列

CSS3 创建多列

column-count 属性规定元素应该被分隔的列数：

div

{

-moz-column-count:3;    /* Firefox */

-webkit-column-count:3; /* Safari 和 Chrome */

column-count:3;

}

CSS3 规定列之间的间隔

column-gap 属性规定列之间的间隔：

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

div

{

-moz-column-gap:40px;            /* Firefox */

-webkit-column-gap:40px;       /* Safari 和 Chrome */

column-gap:40px;

}

CSS3 列规则

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

实例

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

div

{

-moz-column-rule:3px outset #ff0000;    /* Firefox */

-webkit-column-rule:3px outset #ff0000;        /* Safari and Chrome */

column-rule:3px outset #ff0000;

}

10. CSS3 用户界面

规定 div 元素可由用户调整大小：

div

{

resize:both;

overflow:auto;

}

CSS3 Outline Offset

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

轮廓与边框有两点不同：

轮廓不占用空间

轮廓可能是非矩形

规定边框边缘之外 15 像素处的轮廓：

div

{

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

}

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~