一、音频
<audio id="ad" src="media/juhua.mp3" autoplay controls loop>如果浏览器不支持H5新标签audio，此段话将被显示出来</audio>
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
自动播放 |
| controls |
controls |
音频控件 |
| loop |
loop |
循环播放 |
| muted |
muted |
静音 |
| preload |
auto metadata none |
预加载 |
| src |
URL |
音频源 |
二、视频
<video width="672" height="378" controls poster="img/poster.png">
<source src="media/HTML5的前世今生.mp4" type="video/mp4"></source>
当前浏览器不支持video直接播放
</video>
| 属性 |
值 |
描述 |
| width |
pixels |
宽度 |
| height |
pixels |
高度 |
| controls |
controls |
视频控件 |
| autoplay |
autoplay |
自动播放 |
| loop |
loop |
循环播放 |
| muted |
muted |
静音 |
| poster |
URL |
图像占位 |
| src |
URL |
视频源 |
| preload |
auto metadata none |
预加载 |
| 属性 |
值 |
描述 |
| src |
URL |
视频源 |
| type |
MIME_type |
MIME类型 |
3. 形变
1. 旋转形变 : 旋转的是角度 deg
transform: rotateX | rotateY | rotateZ
transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
三个值分别是以X轴,Y轴,Z轴旋转
2. 偏移形变:偏移的是距离 px
transform: translateX | translateY
transform: translateX(200px) translateY(200px);
两个个值分别是以X轴,Y轴偏移
3. 缩放形变:缩放的是比例
transform: scale(2, 0.5);
第一个值为水平方向缩放比例 , 第二个是垂直方向
4. 浏览器适配
在适配的属性前面加上浏览器对应的内核适配 , 如下
- -o-：Opera浏览器
- -ms-：IE浏览器
- -moz-：Firefox浏览器
- -webkit-：Chrome、Safari、Android浏览器
例:
径向渐变
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-image: -webkit-radial-gradient(red, yellow);
}
倒影
-webkit-box-reflect: below | above | left | right;
