CSS3简单介绍
CSS3是最新的css标准（新特性）。
浏览器支持度
由于W3C制定标准慢，浏览器厂商快速加入新特性的支持，故加前缀。
W3C制定标准后，全面支持，去掉前缀。
| 浏览器内核 | 浏览器 | CSS3前缀 |
|---|---|---|
| webkit | safari、chrome | -webkit- |
| gecko | firefox | -moz- |
| presto | opera | -o- |
| trident | ie | -ms- |
注 IE9以及之前版本不支持
CSS3特性
border-radius 圆角边框
html:
<div class="box"></div>
css:
.box{
width: 200px;
height: 200px;
background: red;
border-radius: 40px; /*水平值和垂直值为40px*/
}
| 属性 | 描述 |
|---|---|
| border-radius | （四个方向）水平值 垂直值 |
| border-top-left-radius | 左上角圆角边距 |
| border-bottom-left-radius | 左下角圆角边距 |
| border-top-right-radius | 右上角圆角边距 |
| border-bottom-right-radius | 右下角圆角边距 |
圆
html:
<div class="box"></div>
css:
.box{
width: 200px;
height: 200px;
background: red;
border-radius: 100px;
}
圆角矩形
html:
<div class="box"></div>
css:
.box{
width: 400px;
height: 200px;
background: red;
border-radius: 100px;
}
box-shadow 阴影
box-shadow:内阴影(inset)/外阴影(outset 默认) 水平偏移 垂直偏移 模糊程度 颜色;
html:
<div class="box"></div>
css:
.box{
width: 400px;
height: 200px;
background: green;
box-shadow:inset 10px 10px 50px red;
}
html:
<div class="box"></div>
css:
.box{
width: 200px;
height: 200px;
background: green;
box-shadow: -20px -20px 10px red;
}
text-shadow 文字阴影
text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;
html:
<p>这是一个段落</p>
css:
p{
color:#777777;
box-shadow: -20px -20px 10px red;
}
word-wrap 文本强制换行
允许长单词，url强制换行。
正常情况
强制换行
html:
<p>这是一个长单词段落。avdfasfafafafaerwwwwfbbhjukiiooavdfasfafafafaerwwwwfbbhjukiiooavdfasfafafafaerwwwwfbbhjukiiooavdfasfafafafaerwwwwfbbhjukiioo
</p>
css:
p{
width:200px;
color: #777777;
border: 1px solid #4bff59;
word-wrap:break-word; /*强制换行*/
}
@font-face外部字体引用
之前使用字体需要客户端安装字体或者以照片形式使用。
css3将字体放在服务器，需要时使用。
不同浏览器需要不同的字体格式
| 浏览器 | 字体格式 |
|---|---|
| ie | .eot |
| chrome、firefox | .woff |
| chrome、iphone | .svg |
| firefox、safari、opera | .ttf或.otf |
@font-face{ /*定义字体*/
font-family:"zitimingzi";
src:url('fonts/ziti.ttf'),
url('fonts/ziti.svg'),
url('fonts/ziti.woff'),
url('fonts/ziti.eot');
}
p{ /*引用字体*/
font-family:"zitimingzi" ;
}
2D转换
transform对元素旋转、缩放、移动、翻转。
transform默认以元素中心点进行转换
旋转 rotate()
html:
<div class="box">原div</div>
<div class="box addTrans">添加transform属性的div</div>
css:
.box{
margin: 40px;
width: 200px;
height: 200px;
background: #4bff59;
}
.addTrans{
background: #718dff;
transform: rotate(30deg); /*30deg表示顺时针旋转30度，负数表示逆时针旋转*/
}
缩放 scale()
html:
<div class="box">原div</div>
<div class="box addTrans">添加transform属性的div</div>
css:
.box{
margin: 40px;
width: 200px;
height: 200px;
background: #4bff59;
}
.addTrans{
background: #718dff;
transform: scale(0.5); /*0-1表示缩小，大于1表示放大，scale(0.5)表示x轴和y轴都缩小为原来的一半，scale(0.5,0.8)表示x轴缩小为原来的一半，y轴表示缩小为原来的0.8倍*/
}
移动 translate()
html:
<div class="box">原div</div>
<div class="box addTrans">添加transform属性的div</div>
css:
.box{
width: 200px;
height: 200px;
background: #4bff59;
}
.addTrans{
background: #718dff;
transform: translate(50px,100px); /*50px表示沿x轴移动50px,100px表示沿y轴移动100px*/
}
翻转 skew()
html:
<div class="box">原div</div>
<div class="box addTrans">添加transform属性的div</div>
css:
.box{
margin: 40px;
width: 200px;
height: 200px;
background: #4bff59;
}
.addTrans{
background: #718dff;
transform: skew(9deg,20deg); /*9deg表示沿x轴翻转9度,20deg表示沿y轴翻转20度，正数表示顺时针，负数表示逆时针*/
}
动画
过渡动画（从一个状态到另一个状态，直接变化无中间过程）
过渡属性transition
| 属性 | 描述 |
|---|---|
| transition | 属性名（all表示所有属性） 过渡时间 过渡方法 |
| transition-property | 对哪个属性进行过渡 |
| transition-duration | 过渡持续时间 |
| transition-timing-function | 过渡使用方法（函数，如ease） |
| transition-delay | 过渡开始等待时间 |
transition-timing-function属性值
| 属性值名称 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 慢快慢 |
| ease-in | 慢快 |
| ease-out | 快慢 |
| ease-in-out | 慢快慢 |
html:
<div class="box">原div</div>
css:
.box{
margin: 40px;
width: 160px;
height: 60px;
background: #777777;
color: #fff;
line-height: 60px;
text-align: center;
transition: all 2s ease;
}
.box:hover{
background: #718dff;
transform: scale(1.2);
}
animation动画（从一个状态到最终状态，可以多个不同的过程）
@keyframes定义动画，通过animation引用动画；
@keyframes 动画名{
from{
backgrounfd:red;/*起始动画的相关属性*/
}
to{
backgrounfd:blue;/*结束动画的相关属性*/
}
}
div{
animation: @keyframe定义的动画名 动画时间 动画方式 动画开始等待时间 循环次数（具体数字或者infinite（无限循环）） 是否应该轮流反向播放动画（alternate 轮流反向播放）
}
| @keyframes属性值 | 描述 |
|---|---|
| from to | from相当于0%,to相当于100% |
| 0%-100% | 不同百分比可以有不同动画 |
| animationx相关属性 | 描述 |
|---|---|
| animation | 动画属性的相关简写 |
| animation-name | @keyframe定义的动画名 |
| animation-duration | 动画播放时间 |
| animaition-timing-function | 动画方式（函数） |
| animation-delay | 动画开始等待时间 |
| animation-interation-count | 动画播放次数 |
| animation-direction | 是否应该轮流反向播放动画 |
@keyframes bcolor{
0%{
background:red;
}
50%{
background:yellow;
}
100%{
backgorund:blue;
}
}
div{
width: 200px;
height: 200px;
animation:bcolor 3s linear 1s infinite alternate;
}
3D转换
transform-style:preserve-3d; (使用3D空间,x,y,z轴)
perspective:1000px;(透视（效果为近大远小）)
html:
<div class="allbox">
<div class="imgbox">
<img src="images/timg.jpeg" alt="">
</div>
</div>
css:
.allbox{
width: 200px;
height: 200px;
perspective: 1000px;
}
.imgbox{
width:200px;
transform-style: preserve-3d;
}
.imgbox img{
width: 100%;
}
.imgbox:hover{
transform: rotateY(30deg);
}
