css3技术中常用属性使用详解与实例分析

一.CSS3 圆角

使用 CSS3 border-radius 属性，允许你设置元素的外边框圆角，当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。

语法：border-radius:<length>{1, 4}/<length>{1, 4}

解释：border-radius是一种缩写写法. 如果/前后的值都存在，斜杠前可以有1-4个值，斜杠后也可以有1-4个值，斜杠前面的值为水平半径,后面的值为垂直半径。如果没有/,则水平和垂直的值相等. 顺序是按照top-left、top-right、bottom-right、bottom-left排列的。

如果你要在四个角上一一指定，存在如下几种情况：

1.当只设置一个值时

如果不存在斜杠/时,top-left、top-right、bottom-right、bottom-left四个值相等, 并且水平半径和垂直半径也相同;

如果存在斜杠/时，top-left、top-right、bottom-right、bottom-left四个值相等, 但是水平半径和垂直半径不相同；

如下图效果：

上图的border-radius的值分别为：

<div style="border-radius: 10px;"></div>
<div style="border-radius: 10px/40px;"></div>

2.当只设置二个值时

设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值。如下图效果：

<div style="border-radius: 10px 40px;">10px 40px</div>
<div style=" border-radius: 10px 40px/40px;">10px 40px/40px</div>
<div style=" border-radius: 10px 40px/10px 40px;">20px 40px/20px 40px</div>

3.当只设置三个值时

如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right，如下图效果：

<div style=" border-radius: 10px 40px 60px;"> 10px 40px 60px </div>
<div style=" border-radius: 10px 40px 60px/40px;"> 10px 40px 60px/40px </div>
<div style=" border-radius: 10px 40px 60px;"> 10px 40px 60px/10px 40px 60px </div>

4.当只设置四个值时

如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left。如下图效果：

<div style="border-radius: 10px 40px 60px 80px;">
     10px 40px 60px 80px
</div>
<div style="border-radius: 10px 40px 60px 80px/40px;">
     10px 40px 60px 80px/40px
</div>
<div style="border-radius: 10px 40px 60px 80px/10px 40px 60px;">
     10px 40px 60px 80px/10px 40px 60px
</div>
<div style="border-radius: 10px 40px 60px 80px/10px 40px 60px 80px;">
    10px 40px 60px 80px/10px 40px 60px 80px
</div>

二.CSS3 背景渐变

css3中的渐变(gradients)，可以实现超炫的图形样式效果，可以减少下载的时间和宽带的使用，同时，可以设置渐变的方位和角度，从而灵活的对样式进行控制。渐变分为线性渐变和径向渐变两种，它们的语法如下：

• 线性渐变：linear-gradient

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

实例如下：

1. background-image: linear-gradient(#00d4ff, #8d00ff);
2. background-image: -webkit-linear-gradient( right, #00d4ff, #8d00ff);
3. background-image: linear-gradient(to left top,
         #00d4ff 0%,
         #00d4ff 25%,
         #8d00ff 25%,
         #8d00ff 50%,
         #00d4ff 50%,
         #00d4ff 75%,
         #8d00ff 75%,
         #8d00ff 100%);

注：当不指定方向时，默认是从上往下进行渐变。当指定方向时，会从指定的方向进行渐变。
当方向中有“to”时，不需要加“ -webkit-”前缀。
当方向中省略了to时，必须要加前缀“ -webkit-”。
也可以给每部分渐变指定渐变范围。

• 角度渐变：linear-gradient

如果想要在渐变的方向上做更多的控制，可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法：background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 – x = y 其中 x 为标准角度，y为非标准角度。

实例如下：

background-image: linear-gradient(0deg, red, yellow);
background-image: linear-gradient(45deg, red, yellow);
background-image: linear-gradient(90deg, red, yellow);
background-image: linear-gradient(180deg, red, yellow);

• 重复的线性渐变：repeating-linear-gradient

repeating-linear-gradient() 函数用于重复线性渐变，实例如下：

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); 
background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); 
background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);

• 径向渐变：radial

径向渐变指从一个中心点开始沿着四周产生渐变效果。
必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法：background-image:radial-gradient(position ,shape size,start-color,stop-color)；

说明：

position：定义圆心位置	position用于定义径向渐变的圆心位置，属性值跟background-position属性值相似，也有2种情况： a.长度值，如px、em或百分比等； b.关键字。
shape size 可选参数	由2个参数组成，shape定义形状（圆形或椭圆），size定义大小； shape形状:形状值有circle(圆形)和ellipse(椭圆)。 size大小：size主要用于定义径向渐变的结束形状大小，值有： closet-side(指定径向渐变的半径长度为从圆心到离圆心最近的边)， closest-corner(指定径向渐变的半径长度为从圆心到离圆心最近的角)， farthest-side(指定径向渐变的半径长度为从圆心到离圆心最远的边)， farthest-corne(指定径向渐变的半径长度为从圆心到离圆心最远的角)。
start-color和stop-color 必选参数	start-color：定义开始颜色值； stop-color：定义结束颜色值； 径向渐变可以有多个颜色值，但颜色至少为2个，颜色可以为关键词、十六进制颜色值、RGBA颜色值等。 径向渐变也接受一个颜色值列表，用于同时定义多种颜色的径向渐变

实例如下：

1.颜色结点均匀分布(默认均匀分布)

background-image:-webkit-radial-gradient(red,orange,yellow,#03d603);

2.颜色结点不均匀分布

background-image: radial-gradient(red 5%, yellow 15%, #03d603 60%);

3.设置形状(默认值是 ellipse，即椭圆)

background-image: radial-gradient(circle, red, yellow, #03d603);

4.重复的径向渐变(epeating-radial-gradient() 函数用于重复径向渐变)

 background-image: repeating-radial-gradient(red, yellow 10%, #03d603 15%);

• 兼容IE5-8渐变：filter: progid:DXImageTransform.Microsoft.gradient

对于不支持渐变的IE5-8浏览器，我们可以使用滤镜filter来实现渐变。

语法：filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr=#41caf4, endColorstr=#5399f6);

IE透明度：

语法：filter:alpha(opacity=100)；/*IE6~IE8*/

注：
1.对于径向渐变，如果没有确定位置，则位置位于center位置；如果没有确定大小，直径为原点到最远角的距离（farthest-corner）。
2.为了实现浏览器的兼容，建议加上内核前缀，如：-webkit-，-moz-，-o-，-ms-。
3.若兼容IE6-8的透明度和渐变，可以使用filter滤镜来实现。

三.2D转换

通过css3的转换属性，我们可以对元素进行移动、缩放、转动、拉长或拉伸等操作，转换的效果是让某个元素改变形状，大小和位置发生一定的变化。

关于2D切换的属性有：

属性名	语法和用法
transform	transform:methodName(); transform用于2D或3D转换的元素
transform-origin	改变被转换元素的位置 transform-origin: x-axis y-axis; x-axis:X轴的基点位置，可取的值：left、center、right、length、% y-axis:Y轴的基点位置，可取的值：top、center、bottom、length、%

1.移动：translate() 方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

 transform: translate(50px,0px);
-ms-transform: translate(50px,0px); /* IE 9 */
-webkit-transform: translate(50px,0px); /* Safari and Chrome */

上图，当鼠标移到蓝色块儿上时，蓝块儿从左边元素移动50个像素，并从顶部移动0像素。

2.旋转：rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */

上图，当鼠标移到蓝色块儿上时，rotate值（30deg）元素顺时针旋转30度。

3.缩放：scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴），参数值为倍数

 -ms-transform:scale(2,1.2); /* IE 9 */
-webkit-transform: scale(2,1.2); /* Safari */
transform: scale(2,1.2); /* 标准语法 */

scale（2,1.2）转变宽度为原来的大小的2倍，高度为原来的1.2倍。

4.倾斜：skew(angle,angle) 方法

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

• skewX(<angle>);表示只在X轴(水平方向)倾斜。
• skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

skew(30deg,20deg) 元素在X轴和Y轴上倾斜角度分别为20度和30度。

5.矩阵：matrix(a,b,c,d,e,f) 方法

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能，该函数通过传不同的参数来实现上面所有的功能。
关于矩阵的知识，不在此过多阐述，有兴趣的可以自行研究。

注：由于兼容性问题，建议在属性前加上内核前缀，-webkit-, -ms- 或 -moz- 。
由于2D转换对IE的支持为IE10以上，因此IE9 要求前缀 -ms- 版本。

四.3D转换

2D转换是基于平面方向上的图形转换，3D是在2D的基础上增加了Z轴方向，使其具有空间感。3D转换中的属性除了拥有2D的属性外，还增加了下面常用的属性：

属性名	语法和用法
transform-style	规定被嵌套元素如何在 3D 空间中显示
perspective	perspective: number|none; 规定 3D 元素的透视效果
perspective-origin	perspective-origin: x-axis y-axis; 规定 3D 元素的底部位置

方法如下：

matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4×4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

其具体用法和2D中的使用方法类似，只是增加了Z轴方向上的参数，这里不再赘述。

五.CSS3过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的动态效果。要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

语法：
transition：  transition-property   ||   transition-duration   ||  transition-timing-funciton   ||   transition-delay ；

CSS3过渡属性如下：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。 取值如下： linear: 表示匀速过渡； ease: 默认值，表示过渡的速度先慢，再快，最后非常慢； ease-in: 表示过渡的速度先慢，后越来越快，直至结束； ease-out: 表示过渡的速度先快，后越来越慢，直至结束； ease-in-out: 表示过渡的速度在开始和结束时都很慢； cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。
transition-delay	规定过渡效果何时开始。默认是 0。

实例动画效果如下：

<div class="translate">&lt;/div>
.translate{
background-color:#8d00ff;
height: 100px;
width: 200px;
border-radius: 8px;
transition: width 1s,height 1s,background-color 1s,transform 1s,border-radius 2s;
}
.translate:hover{
width:200px;
height:200px;
background-color:#f00;
transform: rotate(30deg);
border-radius: 100px;
}

上面案例，在hover中写要达到的最终形状，在原本类中写初始的形状和过渡动画属性transition。
属性前加上内核前缀，-webkit-, -ms- 或 -moz- 解决兼容性问题。

六.CSS3动画

在css3中，@keyframes规则可以使用来创建动画，创建动画是通过逐步改变从一个CSS样式到另一个CSS样式。在动画过程中，您可以更改CSS样式，设定多次，指定在变化时、发生时使用％，或关键字”from”和”to”，这是和0％到100％相同，0％是开头动画，100％是当动画完成。
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
@keyframes规则是css3中新增规则，目前主流浏览器都支持该规则（加浏览器对应的前缀），但不兼容IE 9以及更早版本的浏览器，可以加前缀 -webkit-, -ms- 或 -moz- 。

语法：@keyframes animationName {keyframes-selector {css-styles;}};

属性说明：

• animationName：定义animation的名称。
• keyframes-selector：动画持续时间的百分比，可能的值：0-100%、fr、to (和10om (和0%相同)0%相同)。
• css-styles ：一个或多个合法的CSS样式属性。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：

• 规定动画的名称
• 规定动画的时长

CSS3的动画属性

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1，当为infinite时，则永远播放。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。

实例1：

.animation{
width:100px;
height:100px;
background:red;
border-radius: 50px;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;    /*无限循环播放*/
animation-direction:alternate;
animation-play-state:running;
 /*animation: myfirst 5s linear 2s infinite alternate; 简写形式*/
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:#00d4ff; left:200px; top:0px;}
50% {background:#8d00ff; left:200px; top:200px;}
75% {background:yellow; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}