> For the complete documentation index, see [llms.txt](https://gyx8899.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gyx8899.gitbook.io/blog/docs/css.md).

# CSS 特殊用法

## 精选技巧

* Website: Support dark mode

> When your system uses Dark Mode (System Preferences -> General -> Appearance -> Dark)

```css
body {
    color: black;
    background: white;
}

@media (prefers-color-scheme: dark) {
    body {
        color: white;
        background: black;
    }
}
```

* [给透明图片加非透明区域阴影 - drop-shadow](https://codepen.io/denic/pen/MWeGqJb)

```css
.box-shadow {
    box-shadow: 2px 4px 8px #585858;
}

.drop-shadow {
    filter: drop-shadow(2px 4px 8px #585858);
}
```

* [锚点定位滚动动画 css](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior)，

[注意兼容性](https://caniuse.com/?search=scroll-behavior)

```css
/* body 或指定的 container */
body {
    scroll-behavior: smooth;
}
```

* [设定某区域光标自定义图片或 emoji](https://codepen.io/denic/pen/bGVpOPj)

```css
.cursor-image {
    cursor: url(https://picsum.photos/20/20), auto;
}
.cursor-emoji {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
        auto;
}
```

* [文字超长显示...](https://codepen.io/denic/pen/LYpZKMg)

```css
.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.overflow-multi-lines {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
```

* [通过伪类`:target`实现模态框](https://codepen.io/denic/pen/ZEbKgPp)

```html
<!-- 注意锚点的使用 -->
<div class="wrapper">
    <a href="#demo-modal">Open Demo Modal</a>
</div>

<div id="demo-modal" class="modal">
    <div class="modal__content">
        <h1>CSS Only Modal</h1>
        <p>
            You can use the :target pseudo-class to create a modals with Zero JavaScript. Enjoy!
        </p>
        <a href="#" class="modal__close">&times;</a>
    </div>
</div>
```

```css
.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

/* 重点：伪类 target */
/* :target CSS 伪类 代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配. */
.modal:target {
  visibility: visible;
  opacity: 1;
}
```

* [伪类`:empty`可以对 no children / text 进行样式调整](https://codepen.io/denic/pen/KKMpZdP)

```css
.box {
  background: #999;
}
.box:empty {
  background: #fff;
}
```

* [自定义滚动条样式](https://codepen.io/denic/pen/NWrZmwV)

```css
/* 注意兼容性 */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
  background-color: #eff1f5;
}

.custom-scrollbar::-webkit-scrollbar-track{
  border-radius: 3px;
  background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb{
  border-radius:5px;
  background-color:#515769;
  border:2px solid #eff1f5
}
```

* [CSS 实现的动态 tooltip](https://codepen.io/denic/pen/zYobqqa)

```html
<!-- 重点1：data-tooltip -->
<p>
  You can also hover <span class="tooltip" data-tooltip="This is Tooltip Content">here</span> to see another example.
</p>
```

```css
.tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}

/* Tooltip box */
.tooltip:before {
  content: attr(data-tooltip); 
  position: absolute;
  width: 100px;
  background-color: #062B45;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 1.2;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity .6s;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  font-size: 0.75em;
  visibility: hidden;
}

/* Tooltip arrow */
.tooltip:after {
  content: "";
  position: absolute;
  bottom: 75%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  opacity: 0;
  transition: opacity .6s;
  border-color: #062B45 transparent transparent transparent;
  visibility: hidden;
}

.tooltip:hover:before, .tooltip:hover:after {
  opacity: 1;
  visibility: visible;
}
```

* 自定义输入框光标的颜色

```css
input {
    /* 注意兼容性 */
    caret-color: red;
}
```

* input 的 伪类 `::in-range` `:out-of-range`

```html
<label for="numberInput">合法整数：1-10</label>
<input id="numberInput" type="number" max="10" min="1">
```

```css
input:in-range {
    background-color: #dfdfdf;
}
input:out-of-range {
    background-color: red;
    border: 1px solid red;
}
```

* [clamp(MIN, VAL, MAX) 函数](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp) 通过中间 Val 窗口 vw 值，动态改变 css 样式，达到比媒体查询更动态的功效

```css
/* 设置随窗口大小改变的字体大小, 10vw = 10% window width */
font-size: clamp(1rem, 10vw, 2rem);
```

* 使用 `:empty` 隐藏空 HTML 元素

```css
:empty {
  display: none;
}
```

* 使用带有空链接的属性选择器

> 如果 `<a>` 标签里面没有内容，将 href 的值作为内容展示

```css
a[href^="http"]:empty::before {
  content: attr(href);
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gyx8899.gitbook.io/blog/docs/css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.