在ie下实现圆角效果
（由于border-radius兼容性特别差，所以要在ie低版本浏览器下实现圆周角效果特别难）
利用border-style的dotted效果可实现如下图所示的圆效果：
代码简单如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 150px;
height: 150px;
overflow: hidden;
}
.dotted {
width: 100%;
height: 100%;
border: 149px dotted red;
}
</style>
</head>
<body>
<div class="box">
<div class="dotted"></div>
</div>
</body>
</html>制作三杠icon效果
其实就是利用border-style double特性
hover变色
我们在做如下图标时，
一般情况下hover时会有三处变色
但是利用border-color继承自color这一特性hover时可以只改一处，如下简便的写
利用透明边框使得图片定位容器右侧变得容易
一般background-position是距离左上角定位的，比方说我想要距离上边50px 左边40px，可以
background-position: 50px 40px;但是如果想要让图片距离距离下边40px 右边50px 怎么办呢？
border-right: 50px solid transparent;
background-position: 100% 40px;上面代码就实现了这个功能，主要原因是background-position是不把border计算在内的，所以100%......
制作三角效果
从最简单的看起
利用边框增加点击区域响应范围
利用border点击后有响应，再配合box-shadow可增加响应区域大小
实现两栏等高布局
.box {
border-left: 300px solid transparent;
}
.left {
width: 300px;
margin-left: -300px;
float: left;
}
<div class="box">
<div class="left">这里是左边栏内容</div>
<div>
不管我右边栏内容多高，两边都是等高的，而且没有任何浏览器兼容性问题</div>
</div>总结：
1）border-width不支持百分比，因为边框不会因为元素尺寸的变化而缩放，类似的outline、box-shadown、text-shadow......都是不支持百分比的
2）border-color、text-shadown、drop-shadown、outline等都是从color继承来的
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。