css样式代码样式效果 |css li 图标

下面是一些CSS样式代码和它们的效果：

/* 下划线 */
.text-underline {
text-decoration: underline;
}
/* 删除线 */
.text-through {
text-decoration: line-through;
}
/* 斜体 */
.text-italic {
font-style: italic;
}
/* 加粗 */
.text-bold {
font-weight: bold;
}
/* 字体颜色渐变 */
.background-gradient {
background: linear-gradient(to right, #2193b0, #6dd5ed);
}
/* 圆角边框 */
.border-radius {
border-radius: 10px;
}
/* 悬停效果 */
.hover-effect:hover {
background-color: #ff9b9b;
}
/* 文字阴影 */
.text-shadow {
text-shadow: 1px 1px 2px black;
}
/* 首字母大写 */
.text-capitalize {
text-transform: capitalize;
}
/* 点击效果 */
.click-effect:active {
background-color: #ff8585;
}

以上CSS样式代码可以让大家的网页变得更加精美，有更好的阅读体验。学习CSS不仅可以帮助大家实现网页的美化，还可以让大家更好地理解前端开发的本质。