Question

我正在尝试将边框半径悬停效果应用于导航链接，但我似乎无法将其大于此（http://i.imgur.com/OhHIJSw.jpg）。这是我的代码片段：

CSS：

.nav a:hover {
    background: #091D6C;
    color: #fff;
    border-radius: 1em;
}

HTML：

<ul class="nav">

   <li class="home"><a href="#">Home</a></li>

</ul>

如果有人可以提供帮助，那就太棒了。这是我本周即将到期的学校项目。谢谢！

这是我导航的CSS：

.globalheader .navigation li {
    display: table;
    width: 100%;
    font-weight: 600;
}

.globalheader .navigation .nav {
    display: table;
    table-layout: fixed;
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 1.2em;
    padding-right: 1.2em;
    height: 5.8em;
    overflow: hidden;
}

.navigation {
    position: relative;
    min-height: 4.8em;
    margin-bottom: 2.4em;
    border: .1em solid transparent;
}

很抱歉我的问题没有更清楚，感谢您的快速回复！

Answer 1

border-radius有四个值，每个半径按顺序给出

左上
右上角
右下角
左下

如果省略左下角，则与右上角相同。如果省略右下角，则与左上角相同。如果省略右上角，则与左上角相同。

它缩短了文本的边框，因此为了使其更大，您可以添加padding值。我和@showdev一起去。

例如

.nav a:hover {
    background: #091D6C;
    color: #fff;
    border-radius: 1em;
    padding: 16px; // or 1em;
}

你也可以参考w3school关于border-radius - http://www.w3schools.com/cssref/css3_pr_border-radius.asp

我不能让我的边界半径悬停效果显得更宽

1 个答案: