在 Safari 中修复边界半径?

问题描述

我这里有点问题.我似乎无法让边框底部半径左侧和右侧在 Safari 上正常工作.我在 3 个浏览器(Chrome、Firefox 和 Safari)上截取了边框半径的屏幕截图.只有 Safari 有问题.

谷歌浏览器

火狐

Safari

从那里，您几乎可以看出问题所在.我使用了 border-bottom-left-radius: 120px; 和 border-bottom-right-radius: 20px;.但是，两个顶部半径属性似乎工作正常.

我有点卡住了，因为我不知道如何解决这个问题.顺便说一下，我说的是 Safari 版本 5.1.2 (6534.52.7).

解决方案

在我看来像是 Safari 错误.由使用大于元素 height 的 border-radius 引起.

容易修复；设置 border-radius 以匹配元素的 height.无论如何，我看不出有什么理由让它变大.

如果由于某种原因你需要一个例子:http://jsfiddle.net/zejQX/>

编辑

您可以提供多个值来实现不同的结果:

border-bottom-left-radius: 150px 50px;

这是一个带有宽拱"的示例，如下要求:http://jsfiddle.net/BpJ7v/3/

I'm in a bit of a problem here. I can't seem to get the border-bottom-radius-left and right to work properly on Safari. I took screenshots of the border radius on 3 browsers (Chrome, Firefox, and Safari). Only Safari had the trouble.

---

Google Chrome

---

Firefox

---

Safari

---

From there, you can pretty much tell the problem. I used border-bottom-left-radius: 120px; and border-bottom-right-radius: 20px;. However, the two top radius properties seem to be working fine.

I'm kinda stuck because I'm not sure how to fix this. By the way, I'm talking about Safari Version 5.1.2 (6534.52.7).

解决方案

Looks like a Safari bug to me. Caused by using a border-radius larger than your elements height.

Easy fix; set the border-radius to match the element's height. I can't see a reason to make it larger anyway.

If for some reason you need an example: http://jsfiddle.net/zejQX/

EDIT

You can supply more than one value to achieve different results:

border-bottom-left-radius: 150px 50px;

Here's an example with a "wide arch" as requested below: http://jsfiddle.net/BpJ7v/3/

这篇关于在 Safari 中修复边界半径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！