览星CSS支持库文档

览星CSS支持库

轻量级、现代化的CSS工具库，为您的Web项目提供优雅的视觉效果和实用的组件样式

安装指南

在HTML的<head>中添加以下代码即可使用览星CSS:

无需下载任何文件，直接通过CDN引用，始终使用最新版本，我们也鼓励这种行为，这不会导致卡顿，但复制粘贴会

注：复制粘贴在你的html里只会让你看起来专业，但会使加载速度如同乌龟！
经过工作室测试，引用库内容加载速度1.6s，复制粘贴内容加载速度3.8s！

核心工具类

览星CSS提供了一系列实用的工具类，可快速应用于您的HTML元素

.text-shadow

为文本添加精致的阴影效果，增强层次感和可读性。

.text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }

优雅的文字阴影效果

.transition-all-300

为元素的所有属性添加平滑的过渡效果，持续时间为300ms。

直接引用即可

.glass-effect

创建流行的毛玻璃效果，适合现代UI设计。

毛玻璃效果卡片

这种效果在现代UI设计中非常流行，为界面添加深度和现代感。

预设组件样式

览星CSS内置了常用组件的样式，开箱即用

.product-card

产品卡片组件，悬停时有上浮效果，增强交互体验。

产品图片

高级无线耳机

$129.99

悬停在上方查看效果

价格计算器滑块

自定义样式的滑块控件，适用于价格选择器、音量控制等。

/* 价格计算器滑块样式 */ input[type="range"] { -webkit-appearance: none; height: 8px; background: #e5e7eb; border-radius: 4px; background-image: linear-gradient(#1a56db, #1a56db); background-repeat: no-repeat; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #1a56db; cursor: pointer; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; }

$0 $500

当前价格: $250

自定义滚动条

美观的滚动条样式，提升整体用户体验。

::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

带有自定义滚动条的容器

滚动此内容区域查看滚动条效果...

滚动条是现代UI设计中经常被忽视的一个元素，但一个精心设计的滚动条可以显著提升用户体验。

览星CSS提供了简洁美观的滚动条样式，既能满足功能需求，又不会分散用户的注意力。

尝试滚动此框体验平滑的滚动效果。

自定义滚动条在深色模式下尤为出色，但在这个示例中我们使用了浅色主题。

您可以根据需要调整滚动条的颜色和其他属性。

综合效果示例

览星CSS工具类在实际项目中的应用

现代产品展示卡片

结合多种览星CSS效果创建的产品卡片

高级无线耳机

主动降噪技术，30小时续航，蓝牙5.2

$129.99

旗舰智能手机

6.7英寸AMOLED，120Hz刷新率，奶龙888

$899.99