CSS3:边框与圆角
知识点：
CSS3圆角
CSS3盒阴影
CSS3边界图片
一、CSS3圆角
border-radius属性
一个最多可指定四个border-- radius属性的复合属性，这个属性允许你为元素添加圆角边框！
【语法】
border-radius:1-4 length|%/1-4 length|%;
【兼容性】
IE9+、FireFOX4+、Chrome、Safari5+、Opera
CSS3制定每个圆角
多值
四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值：第一个值为左上角，第二个值为右下角和左下角，第三个值为右下角。
两个值：第一个值为左上角与右下角，第二个值为右上角和左下角。
一个值：四个圆角值相同。
属性
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius定义了右下角的弧度
border-bottom-left-radius定义了左下角的弧度
二、CSS3盒阴影
box-shadow属性
box-shadow属性可以设置一个或多个下拉阴影的框
案例
鼠标移入产生阴影.gif
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒阴影</title>
<style type="text/css">
div{
width: 300px;
height: 200px;
background-color: #f0f;
margin:0 auto;
}
div:hover{box-shadow:10px 10px 0 0 #bbb;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
【语法】
box-shadow:h-shadow v-shadow blur spread color inset;
【兼容性】
IE9+、FireFOX4+、Chrome、Safari5+、Opera
三、CSS3边界图片
border-image属性
使用border-image-*属性来构建美丽的可扩展按钮
【可能的值】：
【语法】
border-image:source slice width outset repeat;
【兼容性】
IE不兼容、Firefox、Chrome、Safari6+、Opera不兼容
CSS3边界图片详解
1.border-image-source属性
border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式
【语法】
border-image-source:none|image;
2.border-image-slice属性
border-image-slice属性制定图像的边界向内偏移
【语法】
border-image-slice:number|%|fill;
3.border-image-width属性
border-image-width属性指定图像边界的宽度
【语法】
border-image-width:number|1%|auto;
4.border-image-outset属性
border-image-outset用于指定在边框外部绘制border-image-area的量
【语法】
border-image-outset:length|number;
5.border-image-repeat属性
该属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）
【语法】
border-image-repeat:stretch|repeat|round|initial|inherit;
