深入理解border

Posted 2020-10-17 niusan

1,border-width 不支持百分比
       类似的out-line,box-shadow,text-shadow,...
      borer-width    支持关键字 thin 1px;  medium 厚薄均匀 3px; thick 厚的5px;

2,border-style:solid;
  border-style:dashed;虚线  IE 2:1; chrome/firefox 3:1
  border-style:dotted;点线  IE 圆点  chrome/firefox 方点
   border-style:double;双线  
三大杠效果
             {
                width: 120px;
                height: 20px;
                border-top: 60px double;
                border-bottom: 20px solid;
             }

            
border-style:inset;内凹

3，border-color 没有指定bordere-color的时候，会使用color作为边框色。
4,border与background定位
   background定位的局限：只能相对于左上角定位不能相对由下角。（2.1）
kackground-position定位   图片距离右边框50像素
border-right:50px solid transparent;
background-position:100% 40px; /* 100% 右侧定位不计算border区域*/

5，border与三角等图形构建
   三角形{width: 0px ;height: 0px;

      border: 100px solid ;
      border-color: red red ;}

6，border的透明边框
   优雅的增加啊相应区的大小,
      .checkbox { border：2px solid transparent;
            box-shadow: inset 0 1px, inset 1px 0,inset -1px 0 ,inset 0 -1px;
            background-color: #fff;
            -webkit-background-clip: border-box;
            -moz-background-clip: border-box;
            background-clip: content-box;
            color :#d0d0d5;
       }
   增加可视渲染区域
      .icon {
         position: relative; left:-20px;
         border-right: 20px solid transparent;
         filter: drop-shadow(20px 0 #ffffff);
      }
7,border在布局中的应用
   等高布局   /*不支持百分比布局*/
   原理：    
   <div class="box">
      <nav class="left">
         <h3>导航1</h3>
      </nav>
      <section>
         <div class="module">模块1</div>
      </section>
   </div>
   /*****************/
   .box {
      border-left: 300px solid #222;
   }
   .left {
      width: 300px;
      margin-left: -300px;
      float: left;
   }