CSS 创建CSS中按钮上半部分的圆角效果

在本文中，我们将介绍如何使用CSS在按钮的上半部分创建圆角效果。圆角按钮是现代UI设计中常见的元素，有时我们只需要将按钮的上半部分设置为圆角，以达到更加美观的效果。

阅读更多：CSS 教程

使用border-radius属性创建圆角按钮

在CSS中，我们可以使用border-radius属性来给元素添加圆角效果。border-radius可以设置一个或多个半径值，以像素(px)、百分比(%)或em单位进行定义。如果我们只想给按钮的上半部分添加圆角，可以通过组合使用border-radius属性和其他CSS属性来实现。

接下来，我们将演示如何在按钮的上半部分创建圆角效果：

.button {
  width: 200px;
  height: 50px;
  background-color: #e74c3c;
  color: white;
  text-align: center;
  border-radius: 10px 10px 0 0;
}

在上面的示例中，我们先定义了按钮的宽度和高度，然后设置了背景颜色、文字颜色以及文本居中对齐。最后，我们通过设置border-radius属性的值来创建圆角效果。其中，10px表示按钮的左上角和右上角为10像素的圆角，而0则表示按钮的右下角和左下角为直角。

使用伪元素::before和::after创建圆角上半部分

除了使用border-radius属性，我们还可以通过使用伪元素(::before和::after)来创建圆角按钮的上半部分。

下面是一个使用伪元素的示例：

.button {
  width: 200px;
  height: 50px;
  background-color: #e74c3c;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: inherit;
  border-radius: 10px 10px 0 0;
  z-index: -1;
}

在上面的示例中，我们首先将按钮的定位方式设置为相对定位(relative)，并将其溢出部分隐藏(overflow: hidden)。然后，我们使用::before伪元素来创建一个与按钮相同大小的层，并将其位置设置在按钮的上半部分。接着，我们给这个伪元素设置了与按钮相同的背景颜色，并通过使用border-radius属性来实现圆角效果。最后，我们将这个伪元素的层级设为-1，以确保按钮内容在伪元素下方显示。

通过使用::after伪元素也可以实现类似的效果，只需将它的位置设置在按钮下半部分即可。