CSS3动画实例、div/文字阴影、背景高亮、圆角边框预览

CSS3动画实例预览

css3新增了动画制作属性Animation，可以制作各式各样的文字、图形、图片动画；另外，还新增了对象阴影、文字阴影，可制作html元素和文字阴影效果；再次，还新增了圆角属性，不用图片就能制作出圆边框。

CSS3鼠标经过背景高亮显示实例效果预览（鼠标移上去）

CSS3背景、边框颜色、字体、阴影过渡实例效果预览（鼠标移上去）

• 过度属性为：背景颜色
  transition-property:background-color;
• 过度属性为：边框颜色和宽度
  transition-property:border-color,border-width;
• 过度属性为：字体颜色
  transition-property:color;
• 过度属性为：字体大小
  transition-property:font-size;
• 过度属性为：阴影
  transition-property:text-shadow;

CSS3圆角边框效果预览

• 只设置1个数值的圆角边框效果：
  border-radius:4px;
• 设置2个数值的圆角边框效果：
  border-radius:4px 6px;
• 设置3个数值的圆角边框效果：
  border-radius:4px 6px 8px;
• 设置4个数值的圆角边框效果：
  border-radius:4px 6px 8px 10px;

CSS3过渡类型效果预览（鼠标移上去）

• 平滑过度（ease）：
  transition-timing-function:ease;
• 线性过度（linear）：
  transition-timing-function:linear;
• 由慢到快（ease-in）：
  transition-timing-function:ease-in;
• 由快到慢（ease-out）：
  transition-timing-function:ease-out;
• 由慢到快再到慢（ease-in-out）：
  transition-timing-function:ease-in-out;
• 步进函数（step-start）：
  transition-timing-function:step-start;
• 步进函数（step-end）：
  transition-timing-function:step-end;
• 步进函数（steps）：
  transition-timing-function:steps(2, start);
• 步进函数（steps）：
  transition-timing-function:steps(5, end);
• 自定义贝塞尔曲线类型（cubic-bezier）：
  transition-timing-function:cubic-bezier(0.5, 0.2, 0.7, 0.3 );

CSS3设置对象（区块/背景）阴影实例效果预览

• 常规外阴影效果：
  box-shadow:5px 5px rgba(200, 199, 199, .8);
• 边缘模糊外阴影效果：
  box-shadow:5px 5px 5px rgba(200, 199, 199, .8);
• 边缘模糊且外延外阴影效果：
  box-shadow:5px 5px 5px 10px rgba(200, 199, 199, .8);
• 常规内阴影效果：
  box-shadow::3px 3px rgba(200, 199, 199, .8) inset;
• 边缘模糊内阴影效果：
  box-shadow:3px 3px 6px rgba(200, 199, 199, .8) inset;
• 边缘模糊且外延内阴影效果：
  1px 1px 6px 4px rgba(200, 199, 199, .8) inset;
• 多组外阴影效果：
  1px 1px 2px 2px rgba(64, 242, 55, .7),
  2px 2px 3px 3px rgba(242, 161, 55, .8),
  3px 3px 4px 4px rgba(21, 93, 240, .8),
  0 0 5px 5px rgba(240, 21, 67, .8);