css 基础入门 border +边框三角形

习惯养成：用ps测量宽高时    不包含border

1，border（边框）

       border：1px         solid        #000；

                    （粗细）  （样式）    （颜色）

页面自动设置

1. border-top-color: green;
2. border-top-style: solid;
3. border-top-width: 1px;
4. border-right-color: green;
5. border-right-style: solid;
6. border-right-width: 1px;
7. border-bottom-color: green;
8. border-bottom-style: solid;
9. border-bottom-width: 1px;
10. border-left-color: green;
11. border-left-style: solid;
12. border-left-width: 1px;

样式

     solid    实线

     dotted    点线

     dashed     虚线

颜色

       关键字：green   ，red，blue

       rgb（）

       16进制：#000000    #000

2，边框的方向

      top   left   right    bottom

       border-top-color

       border-top-style:solid

       border-top-width

3，单独一条边框的形状：非矩形

当同一个元素身上相邻两条边框的颜色不一样的时候会出现斜角

          border-width

          border-color

  四个方向，可以写1~4个值（顺时针）

         一个值       四条边的（颜色）或者（宽度）都是一样

         两个值         第一个值：上下两条边，    第二个值：左右两条边

         三个值         第一个值：上      第二个值：左右        第三个值：下

         四个值           上      右     下       左

例子：border-width：10px   20px   30px    40px；

4，边框三角形

div{

    width:0;

    height:0;

    border-width:10px;

    border-style:solid;

    border-color:transparent     transparent   #f0a238;

}

透明
        边框三角形的宽度   取决于相邻两条边框的宽度(左右相加20px)
        边框三角形的高度   取决于自身的边框宽度（底部宽10px）

5，一个知识点：

 <style>
        div{
            width:0;
            height:0;
            border-width:10px;
            border-style:solid;
            border-color:transparent transparent #f0a238;
        }
        div{
            width:0;
            height:0;
            border-width:10px;
            border-style:solid;
            border-color:transparent transparent #973248;
        }
</style>

       执行上面的div里面代码，后面的不会覆盖前面的。