CSS3规范语言
1、创建圆角border-radius。
2、向div元素添加方框阴影：box-shadow:10px15px5px#888888;（10px代表阴影往左交错10像素，15px代表阴影往下15像素，5px代表阴影羽化5像素#888888是阴影颜色）、
3、使用图片创建围绕div元素的边框border-image:url(border.png)3030round;（平铺）
border-image:url(border.png)3030stretch;（拉伸）
4、CSS3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。background:url(img.jpg);
background-size:50px100px;（调整背景图片的大小）
background-repeat:no-repeat;
background-size:40%100%;（对背景图片进行拉伸）
5、background-origin属性规定背景图片的定位区域”content”>
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:5px5px5px#FF0000;(水平阴影、垂直阴影、模糊距离，以及阴影的颜色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转换
通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。div
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /IE9/
-webkit-transform:rotate(30deg); /SafariandChrome/
-o-transform:rotate(30deg); /Opera/
-moz-transform:rotate(30deg); /Firefox/
}
通过translate()方法，元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）位置参数：div
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /IE9/
-webkit-transform:translate(50px,100px); /SafariandChrome/
-o-transform:translate(50px,100px); /Opera/
-moz-transform:translate(50px,100px); /Firefox/
}
通过rotate()方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /IE9/
-webkit-transform:rotate(30deg); /SafariandChrome/
-o-transform:rotate(30deg); /Opera/
-moz-transform:rotate(30deg); /Firefox/
}
通过scale()方法，元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数：div
{
transform:scale(2,4);
-ms-transform:scale(2,4); /IE9/
-webkit-transform:scale(2,4); /Safari和Chrome/
-o-transform:scale(2,4); /Opera/
-moz-transform:scale(2,4); /Firefox/
}值scale(2,4)把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。
通过skew()方法，元素转动给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数：div
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /IE9/
-webkit-transform:skew(30deg,20deg); /SafariandChrome/
-o-transform:skew(30deg,20deg); /Opera/
-moz-transform:skew(30deg,20deg); /Firefox/
}
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); /IE9/
-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); /SafariandChrome/
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /Opera/
}
11、CSS3允许您使用3D转换来对元素进行格式化通过rotateX()方法，元素围绕其X轴以给定的度数进行旋转。div
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /Safari和Chrome/
-moz-transform:rotateX(120deg); /Firefox/
}通过rotateY()方法，元素围绕其Y轴以给定的度数进行旋转。div
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /Safari和Chrome/
-moz-transform:rotateY(130deg); /Firefox/
}
通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。div
{
width:100px;
transition:width2s;（应用于宽度属性的过渡效果，时长为2秒-moz-transition:width2s; /Firefox4/
-webkit-transition:width2s; /Safari和Chrome/
-o-transition:width2s; /Opera/
}当鼠标指针悬浮于元素上时div:hover
{
width:300px;
}
当指针移出元素时，它会逐渐变回原来的样式。div
{
width:100px;
height:100px;
background:yellow;
transition:width2s,height2s;
-moz-transition:width2s,height2s,-moz-transform2s;/Firefox4/
-webkit-transition:width2s,height2s,-webkit-transform2s;/SafariandChrome/
-o-transition:width2s,height2s,-o-transform2s;/Opera/
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg);/Firefox4/
-webkit-transform:rotate(180deg);/SafariandChrome/
-o-transform:rotate(180deg);/Opera/
}
13、CSS3动画
通过CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。如需在CSS3中创建动画，您需要学习@keyframes规则。
@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
@keyframesmyfirst
{
from{background:red;}
to{background:yellow;}
}
@-moz-keyframesmyfirst/Firefox/
{
from{background:red;}
to{background:yellow;}
}
@-webkit-keyframesmyfirst/Safari和Chrome/
{
from{background:red;}
to{background:yellow;}
}
@-o-keyframesmyfirst/Opera/
{
from{background:red;}
to{background:yellow;}
}
当在@keyframes中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项CSS3动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
把"myfirst"动画捆绑到div元素，时长：5秒：
div
{
animation:myfirst5s;
-moz-animation:myfirst5s; /Firefox/
-webkit-animation:myfirst5s; /Safari和Chrome/
-o-animation:myfirst5s; /Opera/
}
当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变：
@keyframesmyfirst
{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
@-moz-keyframesmyfirst/Firefox/
{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
@-webkit-keyframesmyfirst/Safari和Chrome/
{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
@-o-keyframesmyfirst/Opera/
{
0%{background:red;}
25%{background:yellow;}
50%{background:blue;}
100%{background:green;}
}
改变背景色和位置：
@keyframesmyfirst
{
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-keyframesmyfirst/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-keyframesmyfirst/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-keyframesmyfirst/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:myfirst5slinear2sinfinitealternate;
/Firefox:/
-moz-animation:myfirst5slinear2sinfinitealternate;
/Safari和Chrome:/
-webkit-animation:myfirst5slinear2sinfinitealternate;
/Opera:/
-o-animation:myfirst5slinear2sinfinitealternate;
}
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;}
column-rule属性设置列之间的宽度、样式和颜色规则。div
{
-moz-column-rule:3pxoutset#ff0000; /Firefox/
-webkit-column-rule:3pxoutset#ff0000; /SafariandChrome/
column-rule:3pxoutset#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:2pxsolidblack;
outline:2pxsolidred;
outline-offset:15px;
}
|
|
