css 五颗星展示评价

可以使用伪元素来实现五颗星的展示评价，具体代码如下：

HTML代码：

<div class="star-rating">
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

CSS代码：

.star-rating {
  font-size: 0;
}

.star {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(star.png);
  background-size: contain;
}

.star:before {
  content: "\2605";
  font-size: 20px;
  color: #ccc;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.star:hover:before,
.star:hover ~ .star:before {
  color: #ffcc00;
}

其中，star.png 是五颗星的图片，可以根据实际情况进行替换。此外，通过伪元素的方式，可以实现鼠标悬停时的星星变色效果。

相关问题

css 样式花五角星

要在 CSS 中创建一个五角星样式，你可以使用伪元素 `::before` 和 `::after` 来实现。以下是一个示例代码：

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #f7d000;
  border-left: 15px solid transparent;
}

.star::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -15px;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #f7d000;
  border-left: 15px solid transparent;
  transform: rotate(35deg);
}

.star::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -15px;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-bottom: 25px solid #f7d000;
  border-left: 15px solid transparent;
  transform: rotate(-35deg);
}

你可以将上述代码应用于一个具有 `.star` 类的 HTML 元素，从而创建一个五角星样式的元素。你还可以调整 `border` 的颜色和大小来适应你的需求。

css画一个五角星

可以使用CSS伪元素来绘制五角星。以下是一种方法：

.star {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #f1c40f;
  border-left: 20px solid transparent;
  transform: rotate(35deg);
}

.star::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -20px;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #f1c40f;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #f1c40f;
  border-left: 20px solid transparent;
  transform: rotate(70deg);
}

这个CSS代码将创建一个黄色的五角星。.star类设置了一个相对定位，并使用border属性创建三角形，然后使用transform属性旋转它们。伪元素::before和::after分别创建两个倾斜的三角形，共同组成五角星的形状。您可以通过更改border的大小和颜色来自定义五角星的外观。