边框属性 Border

边框

3个值

1、粗细 单位：px
2、样式 实线（solid） 虚线 (dashed) 点线(dotted) ----拆分
border-width border-style border-color 1~4个值 上右下左
3、颜色
单词 十六进制 rgb(128,30,30) rgba() a-不透明的 0~1的取值

    border-width:
    一个值： 四个方向都是一样的
    两个值： 第一个值代表上下方向，第二个值代表左右方向
    三个值： 第一个值代表上  第二个值代表左右  第三个值代表下
    四个值： 上，右，下，左

边框不重复，重复就变形（三角形、梯形）

        边框的拆分样式：（按方向拆分）
        border-top
        border-right
        border-bottom
        border-left

边框的拆分样式：（按值来拆分）注意此样式可以分别描述多个方向的边框值：top,right,bottom,left
        border-width
        border-style
        border-color


        深入拆分：（方向和值都拆分）
        border-top-width
        border-top-style
        border-top-color

        border-right-width
        border-right-style
        border-right-color

        border-bottom-width
        border-bottom-style
        border-bottom-color

        border-left-width
        border-left-style
        border-left-color

问题

（1）同一个标签身上相邻的两条边框的颜色不一样的时候会出现斜角

  解决方法：   两个不同的标签，拼接
	div1{border-top:100px;}
	div2{border-tottom:120px;}

***边框可以撑开元素的宽度

（2）边框实现三角形 ----图标

边框大小    颜色的透明度         transparent   完全透明
高度             取决于自身的border-width值
底边的宽      取决于相邻两条边框的border-width值的总和
直角三角形   方法 （2）

  #box{
            width:0;
            height:0;
            border-width:20px 10px 0 0;
            border-style:solid;
            border-color: #111 rgba(0,0,0,0) rgba(0,0,0,0);     
         }