CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框
在本章中，您将了解以下的边框属性：

• border-radius
• box-shadow
• border-image

CSS3 圆角

在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。
在 CSS3 中，很容易创建圆角。
在 CSS3 中 border-radius 属性被用于创建圆角：

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

尝试一下 »

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
• 一个值： 四个圆角值相同

CSS3 圆角属性

CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:
在div中添加box-shadow属性

div
{
box-shadow: 10px 10px 5px #888888;
}

尝试一下 »

语法

box-shadow: *h-shadow v-shadow blur spread color* inset;

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

CSS3 边界图片

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
在 div 中使用图片创建边框

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

尝试一下 »

CSS3 渐变（Gradients）

详细介绍

CSS3 2D 转换

链接
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
2D变换方法：

• translate()
• rotate()
• scale()
• skew()
• matrix()

新转换属性

以下列出了所有的转换属性:

2D 转换方法

CSS3 3D 转换

链接

CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

它是如何工作？

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

• 指定要添加效果的CSS属性
• 指定效果的持续时间。
  应用于宽度属性的过渡效果，时长为 2 秒：

div  {  transition:  width  2s; -webkit-transition:  width  2s; /* Safari */  }

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

规定当鼠标指针悬浮(:hover)于 <div>元素上时：

div:hover  {  width:300px; }

尝试一下 »

CSS3 动画

CSS3 @keyframes 规则

要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

CSS3 动画

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

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

把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div  { 
 animation:  myfirst  5s; -webkit-animation:  myfirst  5s; /* Safari 与 Chrome */  
}

尝试一下 »
**注意: **您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

CSS3的动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

CSS3 box-sizing 属性

属性定义及使用说明
box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

语法

box-sizing: content-box|border-box|inherit: