Css如何在悬停li元素时添加圆角？

Question

我希望在悬停时为li元素添加圆角：

我的HTML：

<ul>
<li id="menufirst">
<span id="menu1"></span>
<a href="#">Menu 1</a>
</li>
<li>
<span id="menu2"></span>
<a href="#">Menu 2</a>
</li>
<li>
<span id="menu3"></span>
<a href="#">Menu 3 </a>
</li>
</ul>

想要存档的示例：

我已经有了一些CSS来使菜单水平。

Answer 1

您可以编写此代码：

<div style="width:400px;height:300px;-webkit-border-radius: 71px;-moz-border-radius: 71px;border-radius: 71px;background-color:#E3934D;">
    Just modify width and height values to get what you need...
</div>

您可以访问here了解更多说明和功能

Answer 2

li:hover{
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
  -webkit-border-radius: 10px 10px 0px 0px;
  border-radius: 10px 10px 0px 0px;
  background-color: #000;
}

li{
  width: 50px;
  height: 50px;
  margin: 30px;
  float: left;
  padding: 10px;
}

li a{
  color: #0070C0;
  font-size: 14px;
  text-decoration: none;
}