CSS应用示例

文本超出时省略

/* 单行 */
.ellipsis-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 多行 */
.ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3; /* Overflow 4 标准属性，未前缀版尚未形成稳定基线，需与上面三条并存 */
}

备注：多行省略现行仍依赖旧版弹性盒的三条组合：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp。Firefox 68+ 实现的也是这套 -webkit- 语法，不是 -moz-line-clamp。

自定义滚动条的颜色

WebKit、Blink 用非标准伪元素做细粒度外观（宽高、圆角、滑块渐变）：

body {
    margin: 0;
    height: 100vh;
    overflow: auto;
}

/* WebKit / Blink 内核 */
body::-webkit-scrollbar {
    width: 15px;  
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ff1212;
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
    );
    background-size:18px 18px;
    background-repeat:repeat;
}

body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
}

/* Firefox 兼容 */
/*
    html {
        scrollbar-width: thin;
        scrollbar-color: #ff1212 #ededed;
    }
*/

新版 Chromium：部分版本不再允许直接对 html 根元素设置滚动条样式，优先作用于 body，或者推荐给滚动容器单独设置。

新版 Chromium（Chrome、Edge ≥121）：如果元素上声明了 scrollbar-width、scrollbar-color，浏览器会切换到「标准滚动条渲染管线」，直接忽略全部 ::-webkit-scrollbar\* 私有伪类样式。

自定义滚动条样式-DEMO

百分比环形图

用纯 CSS 画进度环：外圆表示总量，扇区表示当前进度，中间挖空后形成圆环。两种做法都由 --percent（0–100）驱动；改这个值即改进度。

绝对定位 + 旋转

实现思路：

• 左右两个半圆拼成整圆，各自的 ::after 盖住剩余色；
• 旋转右半遮罩（0°–180°），超过 180° 再旋转左半遮罩（angle - 180）；
• 中间绝对定位的圆盖住内部，形成圆环。

<section>
    <div class="semicircle left"></div>
    <div class="semicircle right"></div>
    <div class="percent">60%</div>
</section>

section {
    --percent: 60;
    --angle: calc(var(--percent) * 3.6deg);
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
section .percent {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
    background-color: white;
    border-radius: 50%;
}
section .semicircle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 200px;
    background-color: #e31515;
    overflow: hidden;
    border-radius: 200px 0 0 200px;
}
section .right {
    left: auto;
    right: 0;
    border-radius: 0 200px 200px 0;
}
section .semicircle::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 200px 0 0 200px;
    background-color: #13cfe7;
    content: " ";
    transform: rotate(var(--deg));
    transform-origin: right center;
    transition: transform 0.6s ease;
}
section .left::after {
    --deg: max(0deg, calc(var(--angle) - 180deg));
    transition-delay: 0.6s;
}
section .right::after {
    --deg: min(var(--angle), 180deg);
    border-radius: 0 200px 200px 0;
    transform-origin: left center;
}

绝对定位 + 旋转 - DEMO

锥形渐变 + mask

实现思路：

• 锥形渐变（conic-gradient）从圆心按角度上色；
• 用 mask 挖出内圆。

section {
    --percent: 60;
    width: 200px;
    height: 200px;
    margin: auto;
    border-radius: 50%;
    background-image: conic-gradient(#e31515 calc(var(--percent) * 1%), #13cfe7 0);
    mask: radial-gradient(transparent 70px, #fff 0);
    transition: --percent 0.6s ease;
}

锥形渐变 + mask - DEMO