Html 相同的css在草图和浏览器中显示不同

我有几个div，一个在另一个之上，显示一个进度条。 我从sketch（图形艺术家程序）获得css。 在sketch中，div相互融合，但是当我使用css并将其放入html页面时，它看起来不太好。 知道会是什么吗？ 我正在附上css和屏幕截图：

.bar bg{
宽度：256px；
高度：10px；
不透明度：0.2；
边界半径：5px；
盒影：插入0 1px 6px 0 rgba（0,0,0,0.9）；
边框：实心1px$白色；
背景颜色：$深蓝色；
}
.椭圆形{
宽度：24px；
高度：24px；
不透明度：0.9；
混合模式：颜色减淡；
背景图像：径向梯度（52%50%处的圆圈，#cf2d8e，#000000）；
利润上限：-16px；
}
.进展{
高度：8px；
不透明度：0.9；
边界半径：4px；
方框阴影：0 0 6px 5px rgba（44、146、255、0.7），插入0 0 1px$图标；
边框：实心1px$蓝色；
背景色：$primary-1；
利润上限：-9px；
左边距：1px；
}

不同的浏览器呈现CSS的方式不同。尝试为不同的浏览器手动调整-moz-radial-gradient（适用于mozilla）和-webkit-radial-gradient（适用于safari）。我都在chrome浏览器中运行