CSS3基本知识点总结 1

1.CSS3边框
边框属性：

border-radius：创建圆角边框

box-Shadow：附加一个或者多个下拉框的阴影

border-image（不支持IE）：使用图像创建一个边框

2.CSS3圆角
可以使用CSS3 圆角制作器来制作一个css3圆角，可以直接生成代码。

3.指定border-radius的每个圆角：

如果只指定一个值，则生成四个圆角；若在每个角上指定，则使用如下规则：

四个值：四个值分别指定左上角、右上角、右下角、左下角。

三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角。

两个值：第一个值为左上角和右下角，第二个值为右上角和左下角。

一个值：四个圆角值相同。

4.创建椭圆边角：

border-radius： 50px/15px;

border-radius: 50%;

5.CSS3的背景：

1>CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。

2>背景的属性有：background-size属性规定背景图片的尺寸。

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

3>.CSS3 多重背景图片：CSS3 允许您为元素使用多个背景图像。

实例
为 body 元素设置两幅背景图片：

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

新的背景属性:
|

属性	描述
background-clip	规定背景图片的尺寸。
background-origin	规定背景图片的定位区域。
background-size	规定背景图片的尺寸。

6.CSS3渐变
渐变可以让我们在两个或者多个颜色之间显示平稳的过渡。

1>两种类型的渐变：

Linear Gradients：线性渐变-向下/向上/向左/向右/对角方向

Radial Gradients：径向渐变，由它们的中心定义

2>线性渐变：

语法：background：linear-gradient(direction, color-stop1, color-stop2, …);

线性渐变默认情况是从上到下。

从左到右的线性渐变：

#grad {

background: -webkit-linear-gradient(left, red, blue);

background: -o-liner-gradient(right, red, blue);

background: -moz-linear-gradient(right, red, blue);

background: linear-gradient(to right, red, blue);/*标准语法*/

}

3>从左上角开始到右下角的渐变：

设置方向为：left top/bottom right/to bottom right(标准语法下)

使用角度对方向进行设置：

这里的角度是指水平线和渐变线之间的角度。So 0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。

使用透明度：

支持透明度，用于创建减弱变淡的效果。

为了添加透明度，使用rgba()函数来定义颜色结点。rgba()函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表示完全不透明。

4>重复的线性渐变：

repeating-linear-gradient()函数用于重复的线性渐变。

径向渐变：

我们可以指定渐变的中心、形状（圆形或者椭圆形）、大小，默认
情况下，渐变的中心是center（表示在中心点），渐变的形状是ellip
se（表示椭圆形），渐变的大小是farthest-corner（表示到最远的角
落）。

语法: background: radial-gradient(center, shape size, start-color, …, last-color);

颜色结点分布不均匀的径向渐变：

#grad{

background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);

}

5>Size参数定义了渐变的大小，可以是以下四个值：

closest-side/farthest-side/closest-corner/farthest-corner

6>重复的径向渐变：

Reperting-radial-gradient()函数用于重复径向渐变。