一，特性简介：
1，CSS3是在CSS2基础上开发，向后兼容，所以不必改变原有的页面设计
2，CSS3的特性在越来越多浏览器上得到支持，但是目前IE是兼容性不太好
二，具体特性：示例地址
1，背景图：多重背景
body
{
background-image:url(/learn/css3/bg_flower.gif),url(/learn/css3/bg_flower_2.gif);
}
2，文本效果：阴影
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
3，字体：自定义字体
4，2D和3D：转换，移动，缩放，转动，拉伸
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
5，过渡和动画：更生动酷炫的视觉效果
div#div4
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}@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 and 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;}
}
6，选择器：更多样智能的选择器
Leave a Reply