border的多样化使用 ~~~ <div class="border"></div> ~~~ ~~~ .border { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 6px; border-color: transparent transparent transparent #f00; } ~~~ 上面样式效果： ~~~ border-color: transparent #f00 transparent transparent; ~~~ 上面样式效果： ~~~ border-color: transparent transparent #f00 transparent; ~~~ 上面样式效果： ~~~ border-color: #f00 transparent transparent transparent; ~~~ 上面样式效果： ~~~ border-color: #f00 #0ff #f90 #a90; ~~~ 上面样式效果： ~~~ border-color: #f00 #f00 transparent transparent; ~~~ 上面样式效果： ~~~ border-color: transparent #f00 #f00 transparent; ~~~ 上面样式效果： ~~~ border-color: transparent transparent #f00 #f00; ~~~ 上面样式效果： ~~~ border-color: #f00 transparent transparent #f00; ~~~ 上面样式效果： ~~~ border-color: #f00 transparent #f00 transparent; // border-color: #f00 transparent; 简写 ~~~ 上面样式效果： ~~~ border-color: transparent #f00 transparent #f00; // border-color: transparent #f00; 简写 ~~~ 上面样式效果： ~~~ border-color: transparent #f00 #f00 #f00; ~~~ 上面样式效果： ~~~ .border { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 16px 6px 8px 6px; border-color: #f00 #f00 transparent #f00; } ~~~ 上面样式效果： ~~~ .border { width: 60px; height: 30px; border-radius: 30px 30px 0 0; background-color: #f00; } ~~~ 上面样式效果：  ~~~ .icon-menu{width: 20px;height: 20px;border-top: 4px solid #666;border-bottom: 4px solid #666;box-sizing: border-box;padding: 4px 0;background-color: #666;background-clip: content-box;} .icon-menu:hover{border-color: #f00;background-color: #f00;} ~~~ 上面样式效果：