CSS 有什么奇技淫巧？

aspect-ratio

宽高比

xml 复制代码

<style>
    div { 
        width: 190px; /* 注意，这个数字要能容纳完内容才有效 */ 
        aspect-ratio: 16 / 9; 
        background: tomato; 
    }
</style> 
<div>我永远保持 16:9</div>

如果，你 aspect-ratio 的值写成 1 ，那么就可以得到一个完美的正方形了！

object-fit

它有两个值，一个是 cover （图片完全覆盖容器，且图片长宽不失真），一个是 scale-down （只保证图片长宽不失真）。

xml 复制代码

<style> 
    img { 
        width: 200px; 
        height: 200px; 
        object-fit: cover; /* 会裁切，只剩中间 */ 
        border: 2px solid #000; 
    } 
</style> 
<img src="https://placehold.co/300x200" alt="demo">

color-scheme: dark light;

启动浏览器自适应深浅色模式！

xml 复制代码

<style> 
    :root { 
        color-scheme: dark light; /* 自动变色 */ 
    } 
</style> 
<h3>切换系统深浅模式来测试</h3> 
<p>在深色模式下，下面的原生控件会自动变黑，文字变白：</p> 
<label> 输入框: <input type="text"> </label>

accent-color:red;

它会自动计算出不同焦点下，表单控件的颜色

xml 复制代码

<style>
    body { 
        accent-color:red; 
    } 
</style> 
<input type="checkbox" checked> 选择框
<br><br> 
<input type="radio" checked> 单选 
<br><br> 
<input type="range"> 拖动滑块

fit-content

它是根据内容，来控制容器的大小的

xml 复制代码

<style>
    div {
        background: skyblue; 
        width: fit-content; 
        margin: auto; 
        padding: 20px; 
    } 
</style>
<div>我是一个 div，使用缩水大法</div>

overscroll-behavior: contain;

解决一个 div，有自己的滚动条。然后用户在这个 div 里滚动到底部时，，整个页面会开始滚动。

xml 复制代码

<style> 
    body { 
        height: 150vh; 
        background: #eee; 
        padding: 50px; 
    } 
    .scroll-box { 
        width: 200px; 
        height: 200px; 
        overflow: auto;
        border: 3px solid #333;
        background: white; 
        overscroll-behavior: contain; /* 关键代码 */ 
    } 
    .inner { 
        height: 500px; 
        background: linear-gradient(to bottom, tomato, gold); 
    } 
</style> 
<div class="scroll-box"> 
    <div class="inner">内部滚动条</div>
</div> 
<p>滚动上面的盒子到底部，再继续滚动试试...</p>

text-wrap: balance;

它可以平衡行数之前的词语长度，使其做到尽可能的均衡，整体观感上，要舒服很多！注意，这个属性，只支持 6 行以内，所以尽可能用在一些短小的地方，比如标题！

xml 复制代码

<style> 
    h2 { 
        width: 200px; 
        background: gold; 
        text-align: center; 
        padding: 10px; 
    } 
    #test { 
        text-wrap: balance; 
    } 
</style> 
<h2 id=test>很长很长 so long 很长的 titletitle 标题</h2>
<h2>很长很长 so long 很长的 titletitle 标题</h2>

text-underline-offset: 0.25em;

英文中的 g、y ，是不是这些字母，下面会拖一个尾巴。而 < a > 的原生效果是，这个 underline 线会重叠到这些小尾巴上。

xml 复制代码

<style> 
    a:not([class]) {
        text-underline-offset: 0.25em; 
    } 
</style> 
<p> <a href="#">这是一个正文链接 (g/y)</a> </p> 
<p> <a href="#" class="btn">这是一个按钮链接(不使用该 CSS) (g/y)</a> </p>

outline-offset ！

不计入盒模型尺寸的轮廓线。把鼠标移上去，就会有扩散效果了。而且，只是扩散，不会影响各种尺寸。

xml 复制代码

<style>
    button { 
        margin: 30px; 
        padding: 10px 20px;
        border: 1px solid #333; 
        outline: 2px dashed blue;
        outline-offset: var(--offset, 2px);
        transition: outline-offset 0.2s; 
    } 
    button:hover { 
        --offset: 10px; 
    } 
</style>
<button>鼠标悬停看扩散效果</button>

scroll-margin-top

怎么形容这个场景呢？你有个固定的顶部导航栏。它高度是 100px 。然后你单击链接，是一个滚动到某个 #part 标题的链接，你会发现默认滚动后，它是紧挨着顶部的。那么导航栏就挡住了（我也不太能说清，大家看下面的例子吧）..... 如何不介入 js 来解决这个问题呢？就是scroll-margin-top ！

注意，要在本地建一个 html 来运行，否则会乱跳转！

xml 复制代码

<style> 
    nav { 
        position: fixed;
        top: 0; 
        width: 100%; 
        height: 100px; 
        background: rgba(255,0,0,0.5); 
    } 
    h2[id] { 
        scroll-margin-top: 110px; /* 100px + 10px 缝隙 */ 
        background: yellow; 
    } 
    body { 
        height: 2000px; 
        padding-top: 120px; 
    } 
</style> 
<nav>我是 100px 高的固定栏 (半透明)</nav> 
<a href="#part-1">>>> 点我跳转到目标 <<<</a> 
<div style="height: 500px;"></div> 
<h2 id="part-1">目标标题：你看不到红色的遮挡</h2>

scrollbar-gutter: stable;

解决一个滚动条跳动 Bug 。就是页面的内容，动态变多，会突然出现滚动条。然后画面会跳动一下。

xml 复制代码

<style>
    div { 
        width: 200px; 
        height: 150px; 
        overflow-y: auto; 
        border: 2px solid #333; 
        scrollbar-gutter: stable; /* 关键 */
    }
</style> 
<div> 虽然内容很少，不需要滚动， 但请注意右侧预留的空白槽。 这保证了内容增加时不会发生位移。 </div>