边框

1.实现边框

　　属性：border
　　例子：border:3px double blue;
　　取值：border-width,border-style,border-color
　　　　边框宽度，样式，颜色，三个值缺一不可（即使有些值具有默认值）
　　　　border-width:取值像素，设置四个方向边框宽度
　　　　border-style：边框样式
　　　　　　取值：solid 实线边框，dashed 虚线边框，dotted 点线边框，double双线边框
　　　　border-color：设置边框颜色，取颜色值，如果给了transparent那么就是透明
　　注意：1.使用border属性为元素设置边框，是同时设置上，右，下，左四个方向
　　　　　2.取消默认边框， border：none（这个用法常见于按钮）

2.单边框的设置

　　属性：1.border-top：设置顶部边框
　　　　　2.border-right：设置右边边框
　　　　　3.border-bottom：设置底部边框
　　　　　4.border-left：设置左边边框
　　取值：跟border中的取值一样。

3.网页三角标的制作：
　　1.设置空的块元素，宽高都为0
　　2.为元素设置等宽的边框
　　3.调整边框颜色，显示一个方向的边框，其余边框设置透明色（transparent）
　　注意：四个方向的边框缺一不可，缺少的话，边框会恢复成矩形边框，不再是三角形。

4.轮廓线：
　　属性：outline
　　　　取值：width，style，color
　　取消轮廓线：outline：none；
　　注意：轮廓线围绕在元素内容区域四周，与边框类似，但有区别：轮廓线在网页中不占位，边框在网页中是实际占位的

5.圆角边框：
　　1.属性：border-radius
　　2.取值：像素值或者百分比
　　　　1.border-radius：20px；一个值表示四个角都已20px做圆角
　　　　2.border-radius：20px 40px；取两个值的时候，按照上右下左顺时针方向设置圆角，从左上角开始一次取值，在给两个值的情况下，上下保持一致，左右保持一致。
　　　　3.border-radius：10px 20px 30px；取三个值得时候，缺少的第四个值与第二个保持一致。
　　　　4.border-radius：10px 20px 30px 40px；分别设置四个圆角程度
　　3.百分比取值实现元素形状改变
　　　　border-radius：50%；
　　　　注意：使用百分比设置圆角边框时，是参照当前元素的尺寸进行计算的
　　　　　　　如果元素本身是长方形，设置50%的圆角会变成椭圆
　　　　　　　如果元素本省是正方形，设置50%的圆角会变成正圆

6.边框阴影（盒阴影）
　　1.属性：box-shadow
　　2.取值：offset-x 阴影的水平偏移距离，取像素值
　　　　　　offset-y 阴影的垂直偏移距离，取像素值
　　　　　　blur 阴影的模糊程度，值越大越模糊，取像素值
　　　　　　spread 阴影的延伸距离（可选），取像素值，可以扩大阴影的范围
　　　　　　color 阴影颜色（默认为黑色）
　　　　注意：不管是浏览器窗口中还是元素本身，都存在坐标系，都在左上角为（0,0）点，向右，向下代表x，y轴