css 半圆角矩形

在CSS中，我们可以使用边框半径属性实现半圆角矩形。边框半径属性有两个值，分别控制矩形的水平和垂直半径。我们可以将水平半径设置为矩形宽度的一半，垂直半径设置为矩形高度的一半，这样就可以得到一个半圆角矩形。

.Box {
  width: 100px;
  height: 50px;
  border-radius: 50px 50px 0 0;
}

这段CSS代码可以让一个宽度为100px，高度为50px的元素变成一个半圆角矩形。我们将左上角和右上角的半径设置为50px，这样就得到了上面的两个半圆角，而左下角和右下角的半径都设置为0，这样就是直角了。

我们同样也可以应用这个技巧来创建带有半圆角的按钮。如下所示：

.btn {
  width: 80px;
  height: 30px;
  border-radius: 15px 15px 0 0;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

这个按钮的宽度是80px，高度是30px，并且有着15px的半圆角。我们将左上角和右上角的半径设置为15px，这样就得到了一个带有半圆角的按钮。我们还为按钮添加了背景颜色、文本颜色、文本居中以及指针悬停样式。

总之，在CSS中，使用边框半径属性来创建半圆角矩形和按钮非常容易。只需要改变水平和垂直半径的值即可。希望这篇文章对你有所帮助。