魅族怎么更改html,使用HTML5和CSS3打造一台魅族M9~

主要是用了CSS3里的圆角、渐变和盒阴影这3个属性，当然还有变换动画属性提供动画效果。

在我装的浏览器里，Firefox8的效果最好，其次是Chrome16，因为如果滑动时点到的是图标的话，有时会变成拖动图片。接着是IE9，在Opera下不知道为什么拖动都一卡卡的。

贴上地址：http://c7sky.com/works/m9

当然这个例子里不是光靠CSS3就能弄出来的，还是用到了一点图片：

Web字体

英文还好，中文字体比较大，估计在国内网站用不到。

而且如果字体在下载中时，在Chrome下会暂时显示空白，Firefox则会先使用其他字体替代显示。

@font-face {

font-family: HelveticaNeue;

src: url(fonts/HelveticaNeue.otf);

}

圆角设置

Firefox下的写法比较特别，位置词要合并起来放到最后。

-webkit-border-bottom-right-radius: 30px 6px;

-moz-border-radius-bottomright: 30px 6px;

border-bottom-right-radius: 30px 6px;

径向渐变

为了兼容各个浏览器，要多写4行加私有前缀的代码，这个很不环保...

background-image: -webkit-radial-gradient(30% 30%, circle closest-corner, white, #DFECF4);

background-image: -moz-radial-gradient(...);

background-image: -ms-radial-gradient(...);

background-image: -o-radial-gradient(...);

background-image: radial-gradient(...);

如果你觉得自己一个个加前缀太麻烦的话，可以试试-prefix-free，一个只有2kb的JS脚本。

http://leaverou.github.com/prefixfree/

然后我还发现了一个运用了prefixfree的页面，里面几乎可以看到几乎所有transition可以做到的变换动画。

http://leaverou.github.com/animatable/

学习CSS3的相关网站