想讓網(wǎng)站變得更加漂亮，除了要有好看的排版和圖片外，還需要適當(dāng)?shù)倪\(yùn)用CSS的技巧。今天我們就來學(xué)習(xí)如何用CSS實(shí)現(xiàn)五角星及評(píng)分的效果。

首先是如何用CSS實(shí)現(xiàn)五角星的效果，步驟如下：

.star {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17.3px 10px;
	border-color: transparent transparent #007bff transparent;
	position: relative;
}
.star:before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17.3px 10px;
	border-color: transparent transparent #007bff transparent;
	position: absolute;
	top: -8.65px;
	left: -10px;
	transform: rotate(36deg);
}
.star:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 17.3px 10px;
	border-color: transparent transparent #007bff transparent;
	position: absolute;
	top: -8.65px;
	left: 10px;
	transform: rotate(-36deg);
}

接下來是如何用帶有評(píng)分的五角星作為評(píng)分組件：

.rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
}
.rating input {
	display: none;
}
.rating label {
	padding: 5px;
	color: #fff;
	font-size: 25px;
	cursor: pointer;
}
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
	color: #fdd017;
}
.rating label:hover:before,
.rating label:hover ~ label:before,
.rating input:checked ~ label:before,
.rating input:checked ~ label:before {
	content: "\2605";
	position: absolute;
}

通過以上代碼，我們可以輕松地實(shí)現(xiàn)五角星評(píng)分的效果，并且可以給用戶帶來輕松愉悅的評(píng)分體驗(yàn)。希望這篇文章能夠?qū)δ阌兴鶐椭?/p>