药丸形状 CSS

在网页设计中，经常需要使用一些特殊形状的元素来美化页面。其中，药丸形状是一种比较常见的形状，常常用于按钮或标签等元素的设计中。本文将介绍如何使用 CSS 来创建药丸形状的元素。

使用 border-radius 属性

创建药丸形状最简单的方法是使用 border-radius 属性。这个属性用于设置元素的圆角，通过设置一个比较大的值，就可以将元素变成药丸形状。具体的做法是，将元素的 width 和 height 属性设置为相等的值，将 border-radius 属性的值设置为元素宽度/高度的一半，如下所示：

.pill {
  width: 100px;
  height: 50px;
  border-radius: 25px;
}

这样就可以创建一个宽度为 100 像素、高度为 50 像素的药丸形状元素。如果需要创建不同大小的药丸形状，只需要修改宽度、高度和 border-radius 属性的值即可。

使用伪元素

另外一种创建药丸形状的方法是使用伪元素。具体的做法是，为元素创建一个 :before 或 :after 伪元素，然后对它进行样式设置。通过使用 transform 属性，可以将元素变成药丸形状。具体的做法是，将 border-radius 属性的值设置为伪元素宽度/高度的一半，同时使用 transform 属性的 scale 函数将伪元素进行缩放，如下所示：

.pill:before {
  content: "";
  display: block;
  width: 100px;
  height: 50px;
  border-radius: 25px;
  transform: scale(1, 0.5);
}

这样就可以创建一个宽度为 100 像素、高度为 50 像素的药丸形状元素。如果需要创建不同大小的药丸形状，只需要修改伪元素的宽度、高度和 border-radius 属性的值即可。

以上就是两种创建药丸形状的方法。在实际的网页设计中，可以根据需要选择不同的方法来创建药丸形状的元素。