CSS3边框

1、CSS3边框简介

border-width: 设置边框的粗细
border-color: 设置边框的颜色
border-style: 设置边框的类型
也可以将上面三个属性合并在一起，缩写的语法是：
  border: border-width border-style border-color;
这三个值中唯一必须的是“border-style”，例如下面这种边框写法将不会有任何效果。
.elm {border: 3px red}
  此外可以对边框的四条边分别设置不同的width、color和style。以style为例：

border-top-style: /*设置元素顶部边框类型*/
border-right-style: /*设置元素右边边框类型*/
border-bottom-style: /*设置元素底部边框类型*/
border-left-style: /*设置元素左边边框类型*/

还有一种简写方式：

border-style: solid;
/* 一个值时，表示四条边都是solid类型 */
border-style: solid dotted;
/* 两个值时，第一个值表示上下边框的类型，第二个值表示左右边框的类型 */
border-style: solid dotted dashed;
/* 三个值时，第一个值表示上边框的类型，第二个值表示左右边框的类型，第三个值表示下边框的类型 */
border-style: solid dotted dashed inset;
/* 四个值时，依次代表上右下左边框 */

2、边框的类型

下面列举常用的边框类型：

属性值	功能描述
none	定义无边框
dotted	定义点状边框
dashed	定义虚线边框
solid	定义实现边框
double	定义双线。双线的宽度等于border-width的值
inherit	规定从父元素继承边框样式（部分浏览器不支持这个属性值）

3、CSS3圆角边框属性

  border-radius是一种缩写方法。如果反斜杠符号“/”存在，“/”前面的值是设置圆角的水平方向半径，“/”后面的值是设置圆角的垂直方向的半径；如果没有“/”，则圆角的水平和垂直方向的半径值相等。另外四个值是按照top-left、top-right、bottom-right和bottom-left顺序来设置的，其主要会有以下四种情况：

• border-radius:{1}设置一个值时，四个圆角的效果一样；
• border-radius:{2}设置两个值时，top-left=bottom-right=第一个值，top-right=bottom-left=第二个值；
• border-radius:{3}设置三个值时，第一个值设置top-left，第二个值设置top-right和bottom-left，第三个值设置bottom-right；
• border-radius:{4}设置四个值是，就按顺序设置样式。
    此外四个圆角也可以不合在border-radius这一个属性里写，可以分成四个设置，这样就可以只设置需要样式的角。

border-top-left-radius:
/* 两个值时分别代表圆角的水平半径和垂直半径 */
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

4、实战体验：制作特殊图形

1）圆形

• 元素的宽度和高度相同。
• 圆角的半径值为元素宽度的一般或者直接设置圆角半径值为50%。
  
  2）半圆

3）扇形（四分之一圆）
原理同半圆，扇形只需要一个角有值即可。

4）椭圆

'/'前面指水平半径，后面指竖直半径。