CSS - 仅给边提供边界半径答案

【问题标题】：CSS - Giving border-radius to only sidesCSS - 仅给边提供边界半径
【发布时间】：2022-12-17 23:55:05
【问题描述】：

我正在尝试复制一个网站，它有一个导航栏，侧面有按钮，这些按钮的边只有边框半径我试着给边框半径，但我的按钮变成了水平椭圆形

<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
height: 40px;
}

</style>
</head>
<body>

</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>

</body>
</html>

【问题讨论】：

您的示例根本不包含边界半径

标签： css

【解决方案1】：

也许不是这个宽高比，但你可以调整它。好主意是将样式合并到 css 文件。使用border-top-right-radius 和border-bottom-right-radius 以及它们旁边的值，您可以修改边框的形状。

<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#navigationBar {
background-color: #e4e4e4;
padding: 10px;
}
.options{
    min-width: 100px;
    min-height: 50px;
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
}

</style>
</head>
<body>

</nav>
<nav id="navigationBar">
<button class="options">Islamic</button>
<button class="options">Educational</button>
<button class="options">Arts & Creative</button>
</nav>

</body>
</html>

【讨论】：

【解决方案2】：

你必须玩边界半径。在这种情况下，您可以使用： .options{ border-radius: 0 10px 10px 0; }

【讨论】：

【解决方案3】：

给 15px border-radius 会起作用

.options {
   border-radius: 15px;
}

【讨论】：