边框半径在Chrome中不起作用

时间:2016-12-21 22:06:49

标签: css google-chrome leaflet

我有一个使用Leaflet创建的地图,我想添加圆角。以下CSS在Firefox中完成工作,但在Chrome中不起作用:

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

在搜索之前的答案时,-webkit-border-radius应该有效,但我仍然遇到问题。还有其他解决方案吗?

注意:在页面加载时,我可以看到圆角一瞬间,然后它们会再次消失。

2 个答案:

答案 0 :(得分:1)

  • 检查开发人员工具(F12)中的“样式”或“已计算”选项卡。
  • 它会告诉您该属性是否被接受或覆盖。
  • “计算选项卡”中仅显示已接受的值。
  • 覆盖的值会有删除线。
  • 如果有一条线(删除线)通过该属性的名称, 然后有些东西会覆盖那个属性。

.leaflet-container { border-radius: 10px; } 应该在Chrome中运行。

另外,尝试将容器的背景设置为传单的图像,然后将其与background-position: bottom center;

对齐。

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

答案 1 :(得分:0)

如果边界半径在标签上,请检查所有属性。标签具有type = submit属性时,它不接受边界半径。