CSS3学习总结

CSS3中新增了许多新的实用的属性，在最近的学习实践中有许多新的理解感悟，通过这一篇文章将那些我认为值得弄明白搞清楚的属性做一下简单的记录。

1.边框

<1> border-radius 属性

该属性用于添加圆角边框，语法 border-radius: a px; 或 border-radius: a %; 其中 a 的值越大，边框的角看起来越圆滑。要注意的是 border-radius属性是一个简写属性，用于同时设置边框的四个属性（分别是：border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius）。

例：

div
{
   border:2px solid;
   border-radius:25px;
}

其中

border-radius:25px;

相当于

border-top-left-radius:25px;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
border-bottom-left-radius:25px;

<2> box-shadow 属性

该属性用于向边框添加阴影效果，在网页的制作中非常实用。

语法： box-shadow: h-shadow v-shadow blur  spread color inset ;  其中h-shadow用于设置水平阴影的位置，v-shadow用于设置垂直阴影的位置，blur设置模糊距离，spread设置阴影尺寸，color用于设置阴影颜色，inset可将外部阴影改为内部阴影。例

div#MyDIV
{
   background-color:red;
   width:100px;
   height:100px;
   box-shadow:10px 10px 5px 5px black inset;
}

*在文字效果中有一个text-shadow属性，与此属性类似，可以了解一下。

2.背景

<1> background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

利用语法：background-origin : *-box ; 可以将背景图片定位到三个不同的盒子中。

<2> 多重背景图片

例，为 div 元素设置两幅背景图片：

div
{ 
   background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

3.过渡

<1> transition 属性

该属性也是一个简写属性，用于一次性同时设置四个过渡属性，

分别为：transition-property （规定应用过渡的 CSS 属性的名称）

              transition-duration （定义过渡效果花费的时间。默认是 0）

              transition-timing-function  （规定过渡效果的时间曲线。默认是 "ease"）
              transition-delay  （规定过渡效果何时开始。默认是 0）

例

transition:width 2s 2s;

相当于

transition-property:width;
transition-duration:2s;
transition-timing-function:ease;
transition-delay:2s;

值得注意的是，有时候为了是网页效果能达到预期的效果，我们需要在transition-property属性中应用多个属性的名称，

例如width属性和height属性，width值增加时默认从左向右过渡，height值增加时默认从上向下过渡。而有时候网页效果要求我们必须使width属性自右向左过渡，height属性自下向上过渡，这是可能就需要我们将width，height属性与 left，right，top，bottom 属性联合起来。

4. 动画

<1>animation 属性

该属性是一个简写属性，用于设置六个动画属性：

     animation-name  （规定需要绑定到选择器的 keyframe 名称）

     animation-duration  （规定完成动画所花费的时间，以秒或毫秒计）

     animation-timing-function  （规定动画的速度曲线）

     animation-delay  （规定在动画开始之前的延迟，默认为0）

     animation-iteration-count  （规定动画应该播放的次数，默认为1）

     animation-direction （规定是否应该轮流反向播放动画，默认“normal”）

另外有动画属性

     animation-play-state  （规定动画是否正在运行或暂停。默认是 "running"）

<2>@keyframes 规则

当我们在 @keyframes 中创建动画时，需要把它捆绑到某个选择器，否则不会产生动画效果。

例  

    将 "myfirst" 动画捆绑到 div 元素，时长：5 秒。（注意：至少规定动画名称、时长两个属性）

div
{
animation: myfirst 5s;
}

在实现动画效果过程中，我们可以通过 关键词 “from”和 ”to“   或者   0%到100%  来使动画改变任意多的样式效果。

例

div
{
   width:100px;
   height:100px;
   background:red;
   animation:myfirst 5s;
}

@keyframes myfirst
{
   0%   {background:red;}
   25%  {background:yellow;}
   50%  {background:blue;}
   100% {background:green;}
}

该例子中动画总时长5秒，将动画分为四块，0%到25%背景颜色由红变为黄，25%到50%背景颜色由黄变为蓝，50%到100%背景颜色由蓝变为绿色。