css3中新增的样式使用示例附效果图

在PC版开发中，由于IE浏览器的限制，我们常常束手束脚，无法充分利用css3的魅力。但随着平板和智能手机的普及，我们可以在手机版和平板版开发中大胆地使用css3了。接下来，我们将深入狼蚁网站SEO优化中常用的几个css3属性。

一、css3前缀的使用

不同的浏览器内核对于css3属性的有所不同，为了兼容各种浏览器，我们需要使用各种前缀。以下是一个关于旋转属性的例子：

```css

-webkit-transform: rotate(-3deg); / 用于Chrome和Safari等Webkit内核的浏览器 /

-moz-transform: rotate(-3deg); / 用于Firefox浏览器 /

-ms-transform: rotate(-3deg); / 用于IE浏览器 /

-o-transform: rotate(-3deg); / 用于Opera浏览器 /

transform: rotate(-3deg); / 用于支持css3的浏览器 /

```

二、圆角

在css2中，要实现圆角需要拼接小图并需要大段的css代码来控制，非常麻烦。而在css3中，通过使用“border-radius”属性，可以轻松实现圆角。以下是一个简单例子：

```css

border-radius: 5px; / 设置四个角均为圆角，半径长度为5px /

border-top-left-radius: 5px; / 仅设置左上角为圆角，半径长度为5px /

```

三、阴影效果

为网页中的任意元素添加阴影效果非常简单。以下是一个带有轻微旋转和阴影效果的图片示例，这两个效果都是通过CSS添加的：

```html

megan.jpg" style="-webkit-transform: rotate(5deg); -webkit-box-shadow: 10px 10px 5px 888;">

```

其中，transform属性用于实现图片旋转，box-shadow属性用于为图片添加阴影效果。你可以调整旋转的角度和阴影的参数，以获取不同的效果。

四、元素变换

除了阴影效果，CSS的transform属性还可以实现元素的缩放、移动、旋转和倾斜。以下是一个鼠标滑过图片放大的例子：

```html

megan.jpg">

```

将鼠标从图片上移开，图片将恢复原状。transform属性的其他参数还包括移动(translate)、旋转(rotate)、缩放(scale)和斜切(skew)。

下节我们将一起动画（transition）和渐变（gradient）的使用。让我们共同期待css3为我们带来更多的惊喜和便利！拭目以待吧！