Logo

菜单

发布于 2026-01-06 15 阅读
0

5 个简短的 CSS 代码片段，带来巨大改变

5 个简短的 CSS 代码片段，带来巨大改变

网站或应用程序的样式和主题对用户体验影响巨大。以下是一些简短的代码片段，可以让您的应用程序或网页看起来美观十倍。

自定义文本选择

::selection您可以使用伪类来更改 HTML 页面的选择样式。

::selection{
  background-color: deeppink;
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

渐变文本

文字渐变背景可以让你的界面美观度提升十倍。不妨在网页的大标题中使用这种样式。

.gradient-text {
  background:  linear-gradient(to top, #30cfd0 0%, #330867 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
}
Enter fullscreen mode Exit fullscreen mode

禁用选择

将 CSS 属性设置user-select为 none，即可禁用网页中的文本选择功能。这在开发 PWA 应用时非常有用，有助于提供类似原生应用的用户体验。

p {
  user-select: none;
}
Enter fullscreen mode Exit fullscreen mode

全屏模式

全屏模式显示图片非常实用，效果显著。你也可以在博客中使用这个功能，让用户可以全屏阅读。是不是很方便？

#element:fullscreen {
  width: 100vw;
  height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

执行以下 JavaScript 函数即可进入全屏模式。

var el = document.getElementById('element'); el.requestFullscreen();
Enter fullscreen mode Exit fullscreen mode

自定义滚动条

与网站或应用主题相匹配的滚动条会带来巨大的差异。务必根据应用主题调整滚动条样式，使其美观大方。您可以通过定位 `<div>` 、`<span>` 和 `<span>`

元素来设置滚动条的每个样式。::-webkit-scrollbar::-webkit-scrollbar-track::-webkit-scrollbar-thumb

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: pink;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: deeppink;
  border-radius: 12px;
}
Enter fullscreen mode Exit fullscreen mode

就这些！如果你知道一些相关的例子，请在评论区留下简短的片段。

文章来源：https://dev.to/thewasif/5-short-css-snippets-that-will-make-big-difference-ean
🏰 钥匙城堡：实体-数字游戏中的...
Git详解：使用Git子模块构建项...