开发中css样式总结

1.修改默认的垂直滚动条

/* 自定义滚动条样式 */
/* 滚动条整体样式 */
::-webkit-scrollbar {
  width: 10px; /* 滚动条宽度 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道背景色 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
  border-radius: 5px; /* 滑块圆角 */
}

/* 滚动条滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 滚动条滑块悬停时颜色 */
}

2.给一段文字设置渐变色

  


  
这是一段渐变色文字

在上面的示例中，我们使用 CSS 的 linear-gradient 属性来定义渐变色。to right 表示从左到右进行渐变。#ff0000 和 #00ff00 是两种颜色，你可以根据自己的需要进行调整。

为了将渐变色应用于文字，我们使用 -webkit-background-clip 属性将背景应用于文字，并使用 -webkit-text-fill-color 属性将文字颜色设为透明，以便显示背景的渐变色。

最后，在

标签中添加 gradient-text 类，这样渐变色效果就会应用于这段文字。