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