css实现圆角矩形

原理：利用css border的属性画出梯形，利用提醒斜边模拟圆角

当设置一个元素为box-sizing:border-box时，此元素的边框和内边距不会再增加他的宽度

background:transparent，设置背景颜色为透明

.top {
height: 0;
border-top: 3px solid transparent;
border-bottom: 3px solid #111;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
}

高度为0，上下两个边框为梯形，左右两个边框为等腰三角形，除底边框外设置为透明，则只剩下一个梯形底边框

所以，在矩形的上面和下面各放上一个梯形，就可以利用梯形的两斜边边简单模拟圆角

参考：https://theqwang.github.io/2016/01/08/%E4%B8%8D%E4%BD%BF%E7%94%A8-border-radius-%E5%AE%9E%E7%8E%B0%E5%9C%86%E8%A7%92/