html5写手机页面教程

今天参考 m.taobao.com 淘宝的手机版网站页面，我自己动手制作了一个 HTML5 手机版网站页面。该页面主要应用了 HTML5 标签、CSS3 样式，并添加了一些特效。下面我将跟大家分享一下相关内容。

谷歌浏览器下的效果展示

在谷歌浏览器中，页面呈现出了预期的效果。接下来，为大家详细介绍主要使用的 CSS3 特性。

主要 CSS3 说明

背景渐变

使用 -moz-linear-gradient(top, #EF3C0F, #F84B20) 和 background: -webkit-gradient(linear, 0 0, 0 100%, from(#EF3C0F), to(#F84B20)) 来实现背景渐变效果。这两个样式分别适用于不同内核的浏览器。如果你想深入了解 CSS3 背景渐变的相关知识，可以查看 css3 背景渐变教程 ，这里就不再赘述。

图片变形

通过 -webkit-transform: rotate(180deg); 可以对图片进行 180 度的水平旋转。在使用箭头图片时，这个效果非常实用，能轻松实现箭头方向的反转。

投影

使用 -webkit-box-shadow: 0px 1px 6px #000; 和 -moz-box-shadow: 5px 2px 6px #000; 来为元素添加投影效果。这两个样式同样是针对不同内核浏览器的。box-shadow 的四个参数分别代表：水平位移、垂直位移、模糊大小和颜色。例如，在 -webkit-box-shadow: 0px 1px 6px #000; 中，水平位移为 0px，垂直位移为 1px，模糊大小为 6px，颜色为黑色（#000）。

圆角效果

使用 -webkit-border-radius: 0px 0px 5px 5px; 和 -moz-border-radius: 0px 0px 5px 5px; 可以为元素添加圆角效果。各个角的圆角半径设置顺序与 margin 和 padding 属性相同，从左上角开始，按顺时针方向依次为左上角、右上角、右下角、左下角。在这个例子中，元素的左下角和右下角被设置为 5px 的圆角半径，而左上角和右上角为 0px，即直角。