Question

我想创建导航，导航的第一个孩子应该获得边框半径。此代码无法正常工作 border-top-left-radius：10px;

＆＃13;

*{
    margin: 0px;
    padding: 0px;
}


nav {
    position: fixed;
    background-color: #D7E8D5;
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}
nav ul {
    list-style: none;
}

nav ul li{
    background-color: #D7E8D5;
}

nav ul li:first-child{
    border-top-left-radius: 10px;
}
    
nav ul a {
    display: block;
    padding: 10px 20px;
    color: #4A3A47;
    text-decoration: none;
}

＆＃13;

<html>
    <head>
        <title>Startseite</title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        
        <nav>
            <ul>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link1</a></li>
            </ul>
        </nav>

    </body>
</html>

＆＃13;

............................................... .................................................. .................................................. .......

Answer 1

问题在于您将相同的background-color应用于nav，因此即使border-top-left-radius应用于第一个li，您也不会看到任何改变。

从background-color: #D7E8D5;删除nav。

注意：我已移除margin-left: -600px以保持nav的视野。

* {
  margin: 0px;
  padding: 0px;
}
nav {
  position: fixed;
  left: 50%;
  margin-left: 0px;
  top: 100px;
}
nav ul {
  list-style: none;
}
nav ul li {
  background-color: #D7E8D5;
}
nav ul li:first-child {
  border-top-left-radius: 10px;
}
nav ul a {
  display: block;
  padding: 10px 20px;
  color: #4A3A47;
  text-decoration: none;
}

<nav>
  <ul>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link1</a>
    </li>
  </ul>
</nav>

Answer 2

您的代码有效，但您要为nav元素添加相同的背景颜色，因此您无法看到它。只需改变一下：

nav {
    position: fixed;
    background-color: #D7E8D5;
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}

到此：

nav {
    position: fixed;
    background: transparent; /* or just get rid of this line */
    left: 50%;
    margin-left: -600px;
    transform: translate(-100%);
    top: 100px;
}

：第一个孩子的边界 - 右上半径不会工作

2 个答案: