Question

我必须得到一个像这样的绿色矩形：rectangle

我试图在CSS文件中使用border-radius有很多方法，但不幸的是，我无法获得相同的形状。

.section_one{
  background-color:#414141;
}
.navigation_list{
  list-style-type: none;
  display: table;
  height: 100%;
  color: white;
}

.navigation_list--item{
  display: table-cell;
  vertical-align: middle;
  padding: 20px;

}


.active{
  background-color: #76C38F;

}
.section_one{
display: flex;
justify-content: space-around;
}

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
  <!-- Just an image -->
<div class="section_one">
   <div>
    <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="#">
        <img src="assets/logo.png" alt="logo">
        <img src="assets/sub_description.png" alt="description">
      </a>
    </nav>
   </div>
   <div class="navigation">
     <ul class="navigation_list">
       <li class="navigation_list--item active">Home</li>
       <li class="navigation_list--item">Style Demo</li>
       <li class="navigation_list--item">Full Width</li>
       <li class="navigation_list--item">Dropdown</li>
       <li class="navigation_list--item">Portfolio</li>
       <li class="navigation_list--item">Gallery</li>
     </ul>

   </div>
</div>



</body>

</html>

Answer 1

你只需要添加

border-radius: 3px;

到你的css课程（你可以根据自己的需要调整像素数！）。

Answer 2

你可以试试这个。

.active {
    background-color: #76C38F;
    border-radius: 6px;
    display: block;
    padding: 4px 20px;
    margin-top: 30px;
}

可能看起来像这样。

Answer 3

试试这个！

.section_one{
  background-color:#414141;
}
.navigation_list{
  list-style-type: none;
  display: table;
  color: white;
}

.navigation_list--item{
  display: table-cell;
  vertical-align: middle;
  padding: 0px 20px;
  border-radius:8px;
}


.active{
  background-color: #76C38F;

}
.section_one{
display: flex;
justify-content: space-around;
}

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
  <!-- Just an image -->
<div class="section_one">
   <div>
    <nav class="navbar navbar-light bg-faded">
      <a class="navbar-brand" href="#">
        <img src="assets/logo.png" alt="logo">
        <img src="assets/sub_description.png" alt="description">
      </a>
    </nav>
   </div>
   <div class="navigation">
     <ul class="navigation_list">
       <li class="navigation_list--item active">Home</li>
       <li class="navigation_list--item">Style Demo</li>
       <li class="navigation_list--item">Full Width</li>
       <li class="navigation_list--item">Dropdown</li>
       <li class="navigation_list--item">Portfolio</li>
       <li class="navigation_list--item">Gallery</li>
     </ul>

   </div>
</div>



</body>

</html>

border-radius圆角矩形

3 个答案: