CSS3 边框、圆角、背景

       CSS3是最新的CSS标准。CSS3被拆分为“模块”。一些最重要的CSS3模块如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。

一、CSS3边框：

       用CSS3，可以创建圆角边框、添加阴影框，并作为边界的形象而不使用设计程序。边框的属性：border-radius、box-shadow、border-image。

1）、border-radius属性用于创建圆角，示例：

2）、box-shadow属性用来添加阴影，示例：

3）、border-image属性可以给图像创建一个边框，示例：

CSS3边框属性：

二、CSS3圆角：

        使用CSS3 border-radius属性，可以给任何元素制作圆角。示例：

        border-radius属性的值可以有1~4个值：四个值（第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角）；三个值（第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角）；两个值（第一个值为左上角与右下角，第二个值为右上角与左下角）；一个值（四个圆角值相同）。示例：

创建椭圆边角，示例：

CSS3圆角属性：

三、CSS3背景：

CSS3中包含几个新的背景属性，提供更大背景元素控制：background-image、background-size、background-origin、background-clip。

1）、background-image属性用于添加背景图片，不同的背景图片间用逗号隔开，所有的图片中显示在最顶端的为第一张。示例：

也可以给不同的图片设置多个不同的属性。示例：

2）、background-size指定背景图像的大小（背景图像的大小由图像的实际大小决定），可以指定像素或者百分比大小示例：

伸展背景图像完全填充内容区域，示例：

3）、background-origin属性指定背景图像的位置区域。Content-box、padding-box、border-box区域内可以放置背景图像。示例：

CSS3允许在元素上添加多个背景图像，示例：

4）、background-clip背景裁剪属性是从指定位置开始绘制。示例：

CSS3背景属性：