CSS3规范语言 适合新手

CSS3规范语言

 

1、创建圆角矩形属性

border-radius。

2、向 div 元素添加方框阴影：

box-shadow:10px 15px 5px #888888;（10px代表阴影往左交错10像素，15px代表阴影往下15像素，5px代表阴影羽化5像素  #888888是阴影颜色）、

3、使用图片创建围绕 div 元素的边框

border-image:url(border.png)30 30 round;（平铺）

border-image:url(border.png)30 30 stretch;（拉伸）

4、CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

background:url(img.jpg);

background-size:50px100px;（调整背景图片的大小）

background-repeat:no-repeat;

 

background-size:40%100%;（对背景图片进行拉伸）

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

<div id=”content”>

       <divid=”content-img”>

       <div id=”content-box”></div>

</div>

</div>

Div{

background:url(img.jpg);

background-origin:content-box;(背景图片定位于content-box层)

}

6、CSS3 允许您为元素使用多个背景图像。

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

7、在 CSS3中，text-shadow 可向文本应用阴影。

text-shadow:5px 5px 5px #FF0000;(水平阴影、垂直阴影、模糊距离，以及阴影的颜色)

8、文字超出区域自动换行

word-wrap:break-word;

9、在 CSS3之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3@font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

@font-face

{

font-family:myFirstFont;

src:url('Sansation_Light.ttf'),

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

使用粗体字体

您必须为粗体文本添加另一个包含描述符的@font-face：

@font-face

{

font-family:myFirstFont;

src:url('Sansation_Bold.ttf'),

     url('Sansation_Bold.eot'); /* IE9+ */

font-weight:bold;

}

 

}

10、CSS32D 转换

1)   通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

div

{

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

}

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

div

{

transform:translate(50px,100px);

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

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

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

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

}

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

div

{

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

}

4)   通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

div

{

transform: scale(2,4);

-ms-transform: scale(2,4);       /* IE 9 */

-webkit-transform: scale(2,4);  /* Safari 和 Chrome */

-o-transform: scale(2,4);   /* Opera */

-moz-transform: scale(2,4);     /* Firefox */

}值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

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

div

{

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

}

6)        matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

div

{

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */

-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Firefox */

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);   /* Safari and Chrome */

-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);           /* Opera */

}

11、CSS3 允许您使用 3D 转换来对元素进行格式化

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

div

{

transform: rotateX(120deg);

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

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

}

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

div

{

transform: rotateY(130deg);

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

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

}

12、CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

div

{

width:100px;

transition: width 2s;（应用于宽度属性的过渡效果，时长为 2 秒）

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

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

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

}

当鼠标指针悬浮于 <div> 元素上时

div:hover

{

width:300px;

}

当指针移出元素时，它会逐渐变回原来的样式。

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s, height 2s;

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

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

-o-transition:width 2s, height 2s,-o-transform 2s; /* Opera */

}

 

div:hover

{

width:200px;

height:200px;

transform:rotate(180deg);

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

-webkit-transform:rotate(180deg); /* Safariand Chrome */

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

}

13、CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及JavaScript。

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

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

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

}

当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项CSS3 动画属性，即可将动画绑定到选择器：

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

 

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

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

}

改变背景色和位置：

@keyframes myfirst

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

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

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0%  {background: red; left:0px; top:0px;}

25% {background: yellow; left:200px; top:0px;}

50% {background: blue; left:200px; top:200px;}

75% {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

贪食蛇效果

div

{

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

/* Firefox: */

-moz-animation-name: myfirst;

-moz-animation-duration: 5s;

-moz-animation-timing-function: linear;

-moz-animation-delay: 2s;

-moz-animation-iteration-count: infinite;

-moz-animation-direction: alternate;

-moz-animation-play-state: running;

/* Safari 和 Chrome: */

-webkit-animation-name: myfirst;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay: 2s;

-webkit-animation-iteration-count:infinite;

-webkit-animation-direction: alternate;

-webkit-animation-play-state: running;

/* Opera: */

-o-animation-name: myfirst;

-o-animation-duration: 5s;

-o-animation-timing-function: linear;

-o-animation-delay: 2s;

-o-animation-iteration-count: infinite;

-o-animation-direction: alternate;

-o-animation-play-state: running;

}

简写：

div

{

animation: myfirst 5s linear 2s infinitealternate;

/* Firefox: */

-moz-animation: myfirst 5s linear 2sinfinite alternate;

/* Safari 和 Chrome: */

-webkit-animation: myfirst 5s linear 2sinfinite alternate;

/* Opera: */

-o-animation: myfirst 5s linear 2s infinitealternate;

}

14、CSS3 多列

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

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;（列之间40像素的间隔）

}

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

div

{

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

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

column-rule:3px outset #ff0000;

}

15、CSS3 用户界面

在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

div

{

resize:both;（div 元素可由用户调整大小）

overflow:auto;

}

两个并排的带边框方框：

div

{

box-sizing:border-box;

-moz-box-sizing:border-box;    /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

width:50%;

float:left;

}

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

轮廓与边框有两点不同：

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

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

div

{

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

}