如何使用 CSS 创建 5 星技能评分栏？

如果你的网站需要展示用户的技能评分，那么一个好看的技能评分栏是必不可少的。那么今天我们就来看看如何使用 CSS 创建一个漂亮的五星评分栏。

HTML 结构

首先，我们需要在 HTML 中创建评分栏的结构。我们可以使用一个包含五个星星的容器，每颗星星对应一个评分级别。HTML 代码如下：

<div class="skill-rating">
  <input type="radio" name="rating" id="star5" value="5" />
  <label for="star5"></label>
  <input type="radio" name="rating" id="star4" value="4" />
  <label for="star4"></label>
  <input type="radio" name="rating" id="star3" value="3" />
  <label for="star3"></label>
  <input type="radio" name="rating" id="star2" value="2" />
  <label for="star2"></label>
  <input type="radio" name="rating" id="star1" value="1" />
  <label for="star1"></label>
</div>

在上面的代码中，我们使用了 input 和 label 元素来实现五颗星星。每个 input 元素都有一个唯一的 id 和对应的 value 值，用来标识评分级别。而每个 label 元素的 for 属性则指向对应的 input 元素，这样当用户点击星星时，对应的 input 元素就会被选中。

CSS 样式

接下来，我们就来为评分栏添加 CSS 样式。我们先来创建评分栏容器的基本样式：

.skill-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

在上面的代码中，我们将评分栏容器的 display 属性设置为 flex，这样星星才能排列在一行。同时，我们将 flex-direction 属性设置为 row-reverse，这样星星就会从右往左排列。并且将 justify-content 和 align-items 属性设置为 center，这样星星就能在容器中居中。

接下来，我们为每颗星星添加样式：

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 2px;
  background-image: url("path/to/empty-star.png");
  background-repeat: no-repeat;
  cursor: pointer;
}

input[type="radio"]:checked + label {
  background-image: url("path/to/filled-star.png");
}

在上面的代码中，我们将 input[type="radio"] 的 display 属性设置为 none，这样星星的原点就不会显示出来。接下来，我们为每个 label 元素设置样式，包括宽度、高度、边距、背景图像和光标。同时，我们将 input[type="radio"]:checked + label 的背景图像设置为 filled-star.png，这样当用户点击星星时，对应的 label 元素就会显示填充的星星。

总结

至此，我们就成功地创建了一个漂亮的五星评分栏。你可以根据自己的需求修改评分栏的样式和 HTML 结构，比如调整星星的大小、间距和颜色等等。希望这篇文章能够对你有所帮助！