css之border&三角形

1.border-width不支持百分比。那样不符合语义。同理，outline、box-shadow、text-shadow也不支持百分比
2.border-width支持关键字，thin（1px）、medium(3px)（默认）、thick(5px)
3.border-style为double要大于等于3px，才能有效果。3像素时1+1+1，4像素时1+2+1。
4.border-style:solid（实线）、dashed（虚线）、dotted（方点或圆点）、double（双线）
5.border-style为double的应用:菜单图标

#box{
    width: 100px;
    height: 20px;
    border-top: 60px double;
    border-bottom:20px solid;
}

6.border-style为inset，内凹；outset，外凸；groove，沟槽；ridge，山脊。没人用，不符合审美，兼容性差。
7.border-color：没有指定border-color时，使用文字的color作为边框的颜色值。同理。box-shadow、text-shadow、outline没有指定颜色时，使用文字的color作为颜色值。
8.border-color的应用
传统方法：代码复杂

<div id="box"></div>
#box{
    width: 100px;
    height: 100px;
    border:1px solid #ccc;
    position: relative;
}
#box:before{
    content: '';
    width: 10px;
    height: 60px;
    background-color: #ccc;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -5px;
    margin-top: -30px;
}
#box:after{
    content: '';
    height: 10px;
    width: 60px;
    background-color: #ccc;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -30px;
}
#box:hover{
    border-color:blue;
}
#box:hover:before{
    background-color: blue;
}
#box:hover:after{
    background-color: blue;
}

新方法：不指定边框颜色，指定字体颜色

        #box{
            width: 100px;
            height: 100px;
            color:#ccc;
            border:1px solid;
            position: relative;
            transition:color 1s;//设置渐变

        }
        #box:before{
            content: '';
            height: 60px;
            border-left:6px solid;
            position: absolute;
            left: 50%;
            top:50%;
            margin-top: -30px;
            margin-left: -3px;

        }
        #box:after{
            content: '';
            width: 60px;
            border-top: 6px solid;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -30px;
            margin-top: -3px;
        }
        #box:hover{
            color:blue;
        }

9.border与background定位
background-position是让背景图片相对左上角固定定位。

background-position:50px 40px;

如何让背景图片相对右上角固定定位？可以借助border来实现。background-position的计算是不包括border区域的，是相对padding盒子的。

{
border-right:50px solid transparent;
background-position:100% 40px;
}
//这样就能让背景图片相对右边50px定位

10.border与三角形、梯形

{
    width:100px;//中间白色正方形的宽
    height:100px;//中间白色正方形的高
    border:50px solid;
    border-color:orange red green blue;
}

{
    width:0px;//中间白色正方形的宽
    height:0px;//中间白色正方形的高
    border:50px solid;
    border-color:orange red green blue;
}

只要让某些边透明，就能构造不同的三角形。

border-color:orange transparent transparent blue;

//梯形
{
width: 40px;
height: 40px;
border: 50px solid;
border-color:orange transparent transparent transparent;
}

11.border与透明边框–用途很广
实现好看的单、复选框，优雅的增加响应区域大小：
当点击有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。

#checkbox{
   visibility: hidden;
}
.checkbox{
  display: block;
  width: 16px;
  height: 16px;
  border:2px solid transparent;//透明边框增大响应区域
  box-shadow: inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px;//多阴影
  background-color: #fff;
  background-clip:content-box;//使背景颜色只在内容区域
  color:#d0d0d5;
}
#checkbox:checked + label{
    background-color: red;
}
<div>
    <input type="checkbox" id="checkbox">
    <label for="checkbox"  class="checkbox"></label>
</div>

drop-shadow给png图标赋色:
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
webkit-filter:drop-shadow(x偏移, y偏移, 模糊大小, 色值);

.icon{
    filter: drop-shadow(40px 0px red);
    -webkit-filter: drop-shadow(40px 0px red);
}
<img src="1.png" class="icon"height="25" width="33" alt="" >

右边红色的图标是绘制出来的。这样，只要将左边的图标隐藏起来，只留下右边图标，就能实现图标颜色变化。但是不在可视区域内的元素是没有投影的。这时候就要借助透明边框。

.wrap{
    overflow: hidden;
    width: 33px;
    height: 25px;
}
.icon{
    position: relative;
    left: -33px;
    border-right: 33px solid transparent;//加上边框，使得img的一部分仍然在可视区域内
    filter: drop-shadow(33px 0px red);
    -webkit-filter: drop-shadow(33px 0px red);
}
<div class="wrap">
    <img src="1.png" class="icon"height="25" width="33" alt="" >    
</div>

12.border与布局
等高布局：左边栏高度增大，右边栏高度也跟着增大；右边栏高度增大，左边栏高度也跟着增大

 #box{
    border-left: 300px solid #222;//利用边框的高度肯定跟背景一样高来实现
    background-color: #ccc;
}
#left{
    float: left;
    width: 300px;
    margin-left: -300px;
}
h3{
    color: #fff;
}
.clearfix{
    *zoom:1;
}
.clearfix:after{
    content: "";
    display: table;
    clear: both;
}
<div id="box" class="clearfix">
  <nav id="left">
        <h3>标题1</h3>
        <h3>标题1</h3>
    </nav>
    <section>
        <div>模块1</div>

    </section>
</div>

局限：边框不支持百分比宽度。

利用margin/padding实现等高布局：

#box{
   background-color: #ccc;
    overflow: hidden;
}
#left{
    float: left;
    width: 50%;
    background-color: #333;
    margin-bottom: -600px;//margin-bottom 给一个很大的负值，再用padding填充回来。
    padding-bottom: 600px;
}
h3{
    color: #fff;
}
section{
    overflow: hidden;
}

局限：如有锚点定位会飞上去