1 css3了解:
CSS 用于控制网页的样式和布局
2 css3模块:
选择器 盒模型 背景和边框 文字特效 2D/3D转换动画 多列布局用户界面
3 css3边框:
创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序
边框属性: border-radius box-shadow border-image
实例:
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
}
4 css3背景:
#jack
{
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
5 css3渐变:
#jian
{
height:200px;
background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);
}
6 css3文本效果:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
7 css3 2D转换:
方法:translate() rotate() scale() skew() matrix()
实例:
div
{
width:300px;
height:400px;
background-color: #F36;
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}
8 css3 3D转换
方法:rotateX() rotateY()
实例:
div{
width:300px;
height:400px;
background-color: #F36;
transform:rotate(30deg);
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
}
div#zhe
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg);
}
9 css3过渡:
当鼠标光标移动到该元素时,它逐渐改变它原有样式
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
transition: width 2s, height 2s, transform 2s;
}
div:hover
{
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}