高德/百度地图（JavaScript）使用圆角地图容器

上文《高德/百度地图（JavaScript）绘制自适应正方形地图容器》中解决了绘制正方形地图容器的问题。但通常设计图为了好看，还会加上了阴影和圆角。阴影倒是好说，直接使用 box-shadow 解决就好。那其实圆角也很简单，直接使用 border-radius 就好啊，但是并不是我们想的那样，即使设置了 border-radius ，在高德地图的 canvas 下，设置的圆角也就找不到了，如图：

解决方案

那要怎样解决呢？目前找到最简单的方法，就是在设置 border-radius 的位置加上这么一行CSS

#mapContainer {
  width: 95%;
  padding-bottom: 95%;
  height: 0;
  border-radius: 5px;
  transform: translate3d(0,0,0);
}

通过 transform: translate3d(0,0,0); 效果就恢复过来了，可以正常显示圆角

为什么？

目前我也不知道。。。搞明白了后续会更新。