尽管使用 Webkit，Border-Radius 在 IOS 上不工作答案

【问题标题】：Border-Radius Not Working on IOS Despite Using Webkit尽管使用 Webkit，Border-Radius 在 IOS 上不工作
【发布时间】：2023-01-10 11:55:17
【问题描述】：

无论我做什么，我似乎都无法让边界半径在 IOS 设备上工作。我尝试过内联样式、webkit 等等。

这是我的 html 和 css 的示例

HTML

        <div class="nav-menu" id="nav-menu-one">
            <div class="nav-item btn btn-effect border-radius"><a href="index.php#body" class="nav-link">Home</a></div>
            <div class="nav-item btn btn-effect border-radius"><a href="#" class="nav-link">Menu Items</a></div>
            <div class="nav-item btn btn-effect border-radius"><a href="#" class="nav-link">Gallery</a></div>
            <div class="nav-item btn btn-effect border-radius"><a href="#" class="nav-link">Events</a></div>
            <div class="nav-item btn btn-effect border-radius"><a href="#" class="nav-link">About Us</a></div>
        </div>

CSS

:root {
    --border-radius: 7px;
}

.border-radius {
    border-radius: var(--border-radius);
    -webkit-border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
}

您可以在已发布的网站（仍在开发中）(http://dessertbargilbert.com) 上看到广告，它在 Chrome 桌面上运行良好，但在 iPad 上测试时，按钮呈方形。为什么会这样？最终目标是让所有具有“border-radius”的类都正确应用边界。

任何帮助是极大的赞赏。

【问题讨论】：

标签： css

【解决方案1】：

我刚刚在 Safari 中玩过 devtools（似乎它在 Safari 桌面上坏了，而不仅仅是 iOS 设备），而且 outline 属性似乎不能很好地与 border-radius 一起玩。

当我删除 outline 并保留 border 和 border-radius 时，它对我有用：

.btn-effect {
  /* Changing `border` color to a non-zero opacity */
  border: 1px rgba(255,255,255,0.5) solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  /* Removing outline styles */
  /* outline: 1px solid; */
  /* outline-color: rgba(255, 255, 255, .5); */
  /* outline-offset: 0px; */
  text-shadow: none;
  transition: 1.25s cubic-bezier(0.19, 1, 0.22, 1);
}

【讨论】：