css 两边半圆的按钮 |css 人工智能

.btn {
display: inline-block;
padding: 12px 24px;
background-color: #123456;
color: white;
font-weight: bold;
border: none;
border-radius: 20px;
}
.btn::before,
.btn::after {
display: inline-block;
content: "";
width: 20px;
height: 100%;
border-radius: 50%;
background-color: #123456;
}
.btn::before {
margin-right: -10px;
}
.btn::after {
margin-left: -10px;
}

上面的代码实现了一个名为 btn 的按钮样式，具体解释如下：

首先是样式基本设置：

.btn {
display: inline-block; /* 让按钮成为行内块级元素，可以设置宽高 */
padding: 12px 24px; /* 按钮内边距 */
background-color: #123456; /* 背景色 */
color: white; /* 文字颜色 */
font-weight: bold; /* 文字加粗 */
border: none; /* 去掉边框 */
border-radius: 20px; /* 圆角半径，这里设置 20px */
}

接着是生成两个半圆的代码：

.btn::before,
.btn::after {
display: inline-block; /* 让伪元素变成行内块级元素 */
content: ""; /* 必须设置 */
width: 20px; /* 半圆直径 */
height: 100%; /* 半圆高度 */
border-radius: 50%; /* 圆形 */
background-color: #123456; /* 背景色与按钮一致 */
}
.btn::before {
margin-right: -10px; /* 负边距使半圆向左移动一半 */
}
.btn::after {
margin-left: -10px; /* 负边距使半圆向右移动一半 */
}

由于 before 和 after 的宽度和高度都和按钮相同，所以它们刚好可以和按钮对齐。再加上负边距的处理，就形成了两个半圆。

以上就是制作 CSS 两边半圆按钮的全部代码和解释。