有没有一种适用于IE、Firefox的CSS方式来实现这个？

Question

当鼠标悬停在文本上时，白色圆角出现作为文本的背景。有没有一种方法可以通过CSS实现这个效果？如何切割圆角背景。谢谢。

- zhuanzhou

---

你关心支持哪些浏览器？如果你是“渐进式”的，你可以只用CSS来实现。或者允许IE不支持圆角... - Jason McCreary

我希望它能够支持IE浏览器，我应该怎么做？ - zhuanzhou

Answer 1

您可以通过应用以下属性来执行圆角CSS样式：

.rounded-corners :hover{
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

- Kyle

---

这里有一个jsfiddle.net，展示了效果的实际运行。 - Beno

但在IE下没有效果。 - zhuanzhou

对于IE8+，此解决方案可行。对于IE7及以下版本，请参见此页面http://jonraasch.com/blog/css-rounded-corners-in-all-browsers - Beno

Answer 2

经典技术是 CSS 滑动门, 但现在你可以使用一些 CSS 3 魔法来获得相同的效果。

a {
    color: #fff;
}

a:hover {
    color: #222;    
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

这里有一个在JSBin上的工作示例：http://jsbin.com/acizer

- derekerdmann

---

@zhuanzhou - 你说得对，在IE8及以下版本中无法正常工作。问题是，圆角对于你的设计有多重要？你的访问者能否在没有它们的情况下使用该网站？如果确实很重要，那么请使用我在答案顶部链接的CSS滑动门技术。 - derekerdmann

Answer 3

是的，您需要使用:hover选择器来使背景出现和消失，并使用border-radius、-moz-border-radius和-webkit-border-radius属性来使角落变圆。

- krasnerocalypse