> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/css-xi-lie/00css-ying-yong-shi-li.md).

# CSS应用示例

## 文本超出时省略

```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 用非标准伪元素做细粒度外观（宽高、圆角、滑块渐变）：

```css
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](https://github.com/1927344728/fed-knowledge/tree/master/demo/04-scroll-style.html)

## 百分比环形图

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

### 绝对定位 + 旋转

**实现思路**：

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

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

```css
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](https://github.com/1927344728/fed-knowledge/tree/master/demo/01-annular1.html)

### 锥形渐变 + mask

**实现思路**：

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

```css
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](https://github.com/1927344728/fed-knowledge/tree/master/demo/01-annular2.html)