CSS3 边框

CSS3 简介

CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。

---

CSS3 模块

CSS3 被划分为模块。旧规范已拆分成小块，还增加了新的。
其中最重要的 CSS3 模块包括：

• 选择器
• 框模型（盒模型）
• 背景和边框
• 文本效果
• 2D/3D 转换
• 动画
• 多列布局
• 用户界面

---

CSS3 边框

用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。
在本章中，您将了解以下的边框属性：

• border-radius  属性被用于创建圆角
• box-shadow    属性被用来添加阴影
• border-image 属性允许你指定一个图片作为边框

---

浏览器支持

浏览器支持.png

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
注释：对于 border-image，Safari 5 以及更老的版本需要前缀-webkit-。
Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀-o-。

---

CSS3 圆角

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

实例

在div中添加圆角元素：

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

尝试一下 »
注意: border-radius 属性是一个简写属性，用于设置四个 border-radius 属性。每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。即：如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

例子 1

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

---

CSS3盒阴影

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

实例

在div中添加box-shadow属性

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

尝试一下 »

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

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

---

CSS3边界图片

有了CSS3的border-image属性，你可以使用图像创建一个边框：

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

以下示例中的原始图片

实例

在div中使用图片创建边框

div{
  border-image:url(border.png) 30 30 round; /* 此处使用 round 图像平铺填充*/
  -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
  -o-border-image:url(border.png) 30 30 round; /* Opera */
}

尝试一下 »

---

新边框属性

属性	说明	CSS
border-image	设置所有边框图像的速记属性。	3
border-radius	一个用于设置所有四个边框- *-半径属性的速记属性	3
box-shadow	附加一个或多个下拉框的阴影	3