css - 边框半径在 Chrome 中不起作用

Question

我有一张使用 Leaflet 创建的 map ，我想为其添加圆 Angular 。以下 CSS 在 Firefox 中起作用，但在 Chrome 中不起作用:

.leaflet-container {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
}

通过搜索以前的答案，-webkit-border-radius 应该可以工作，但我仍然遇到问题。还有其他解决方案吗？

注意:在页面加载时，我可以在一瞬间看到圆 Angular ，但随后它们又消失了。

Answer 1

• 检查开发人员工具 (F12) 中的“样式”或“计算”选项卡。
• 它告诉您属性是否被接受或覆盖。
• 只有接受的值才会显示在“计算”选项卡中。
• 被覆盖的值将带有删除线。
• 如果属性名称有一条线(删除线)，然后某些东西正在覆盖该属性。

.leaflet-container {
边界半径:10px；
应该在 Chrome 中工作。

此外，尝试将容器的背景设置为传单的图像，然后将其居中 background-position: bottom center;

也许您正在设置容器的 border-radius，但由于某处的 CSS position 设置，图像本身可能会“泄漏”。以前发生过...