CSS边框使用-基础

前端开发工做中常常会碰到奇形怪状的图形，固然也少不了UI设计童鞋的脑洞和创意啦，初级的开发人员可能会选择使用图片作背景加上位置属性实现，不过不少时候，CSS能实现的就不要再动用PS等工具了，时间宝贵，经验更宝贵，毕竟简单的搬砖很容易就会，不动“声色“的实现才是来之不易的经（踩）验（坑）

完事开通难，先看CSS的border应用有哪些属性，使用谷歌或者火狐打开一个网页，F12，属性那是至关的多，不过从border-left-*这些的来看，确定是细致到某一部分，压缩一下能够少1/3

 

  建立一个div，按颜色区分看边框的分布状况，直观的感觉一下

 <div class="border-demo border-init"></div>

.border-init {

 border-color: red green yellow blue;

}

充分的发挥想象力，一个信封就出来了，高度40px，宽度随窗口的宽度，边框的颜色取值border-color:：上 右 下 左 顺时针方向渲染

再给div外层加一个div限制一下宽度好比80px

.border-outter { width: 80px; }

.border-demo { 

  border: solid 40px;

}

 //以上样式后面一直要用，就不重复写了

.border-init {

 border-color: red green yellow blue;

}

<div class="border-outter">

 <div class="border-demo border-init"></div>

</div>

画重点：左右两边的边框宽度都是40px，反应到css外层的div宽度恰好是80px，完美的包裹。

到这一步，基本的规则形状特别是三角形能够所有搞定了，只需稍微调整边框的宽度，举个栗子，咱们想获得一个右三角，即箭头朝右

这个时候只须要把左侧边框显示出来就能够，其余的边框设为透明

  <div class="border-outter">

    <div class="border-demo border-left"></div>

  </div>

  .border-left {

   border-color: transparent transparent transparent blue;   

  }  

 

大多数状况下，div盒子的内容不会空，咱们加一个小小的高度

 <div class="border-demo border-init"></div>

.border-ladder {

 height: 10px;

 border-color: red green yellow blue;

}

 调整各边框的色值，既能够获得不一样方向的梯形，到这一步，咱们基本没有作什么事情已经能够得到三角形和梯形这样的样式

 分割线------------------------------------------------------------------------

爱漂亮之心人皆有之， 直来直去，有棱有角总让人感受不舒服，那就委婉一些，这个时候border-radius就要上场，上面的栗子添加圆弧

 <div class="border-demo border-init"></div>

.border-init {

 border-color: red green yellow blue;

 border-radius: 50%;

}

 

一个四边框弧度为50%的div出来了，一个椭圆就这么出来，一个接近青蛙头像的盒子产生

.border-init {

 border-color: red green yellow blue;

 border-radius: 50%;

}

<div class="border-outter">

 <div class="border-demo border-init"></div>

</div>

这就是一个标准的圆形，有了圆形，那扇形就不远了：

  <div class="border-outter">

    <div class="border-demo border-sector"></div>

  </div>

  .border-sector {

   border-color: transparent transparent transparent blue;   

  }  

 

  结合CSS3动画，一个雷达扫描图就出来了

 事实上，border-radius的取值未必就是px，能够经过百分比的形式获取各类形状，典型格式可能值

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 50% 20% / 10% 40%;

举个栗子

微信红包页顶部的圆弧形背景

 <div class="border-demo border-bonus"></div>

  .border-bonus {

   background: red;

    border-color: red;

    border-radius:  50% 50% 50% 50%/ 0 0 50% 50%；

  }