CSS3

1.CSS3边框

• 圆角边框：border-radius
  例如：

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

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
①四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
②三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角。
③两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角。
④一个值： 四个圆角值相同。
——亦可以创建椭圆边角：
border---radius：同时设置四个边角
border-top-left-radius：左上角的弧度
border-top-right-radius：右上角
border-bottom-right-radius：右下角
border-bottom-left-radius：左下角

#rcorners8 { 
    border-radius: 15px/50px; 
    background: #8AC007; 
    padding: 20px; 
    width: 200px; 
    height: 150px; 
} 

• 盒子阴影：box-shadow

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

• 边界图片：border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像。

div { 
border-image:url(border.png) 30 30 round; 
}

2.CSS3背景
background-image属性：不同的背景图片和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 { 
background-image: url(img_flwr.gif), url(paper.gif); 
background-position: right bottom, left top; 
background-repeat: no-repeat, repeat; 
}

background-size属性：通过指定像素或百分比指定背景图片的大小。
指定的大小是相对于父元素的宽度和高度的百分比的大小。

div 
{ 
background:url(img_flwr.gif);
background-size:100% 100%; 
background-repeat:no-repeat; 
}

background-Origin属性：指定背景图像的位置区域。
该三个区域内可以放置背景图像。

background-clip属性：背景裁剪属性，设置从指定位置绘制。
3.CSS3渐变
渐变的类型：线性渐变(向上/向下/向左/向右/对角方向)；径向渐变(由中心定义)
CSS3线性渐变:为了创建一个线性渐变，必须至少定义两种颜色为结点。
颜色结点即为你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向(或一个角度)。
语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);    

例如：
从上到下(默认)：background: linear-gradient(red,blue);
从左到右：background: linear-gradient(to right,red,blue);
从左上角到右下角：background: linear-gradient(to bottom right,red,blue);

• 使用角度：在渐变的方向上做更多的控制，通过定义一个角度。
  角度是指水平线和渐变线之间的角度。
  语法：

background: linear-gradient(angle, color-stop1, color-stop2, ...);    

可以通过指定百分比来选择如何分布。

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

• 重复的线性渐变：

  background:repeating-linear-gradient(color-stop1, color-stop2, ...);
  CSS3径向渐变：
  除了两种颜色结点之外，也可以指定渐变的中心、形状、大小。
  在默认情况下，渐变的中心是center(表示在中心点)；渐变的形状是ellipse(表示椭圆形)；渐变的大小是farthest-corner(表示到最远的角落)。

background: radial-gradient(center, shape size, start-color, ..., last-color);      

• 设置形状：
  circle或ellipse

• size 参数定义了渐变的大小
  它可以是以下四个值：
  closest-side
  farthest-side
  closest-corner
  farthest-corner

• 重复的径向渐变：
  repeating-radial-gradient()函数。