CSS 有什么奇技淫巧？
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<h3 data-id="heading-0">aspect-ratio</h3>
<p>宽高比</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
div {
width: 190px; /* 注意，这个数字要能容纳完内容才有效 */
aspect-ratio: 16 / 9;
background: tomato;
}
</style>
<div>我永远保持 16:9</div></pre>
</div>
<p>如果，你 aspect-ratio 的值写成 1 ，那么就可以得到一个完美的正方形了！</p>
<h3 data-id="heading-1">object-fit</h3>
<p>它有两个值，一个是 cover （图片完全覆盖容器，且图片长宽不失真），一个是 scale-down （只保证图片长宽不失真）。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
img {
width: 200px;
height: 200px;
object-fit: cover; /* 会裁切，只剩中间 */
border: 2px solid #000;
}
</style>
<img src="https://placehold.co/300x200" alt="demo"></pre>
</div>
<h3 data-id="heading-2">color-scheme: dark light;</h3>
<p>启动浏览器自适应 深浅色模式！</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
:root {
color-scheme: dark light; /* 自动变色 */
}
</style>
<h3>切换系统深浅模式来测试</h3>
<p>在深色模式下，下面的原生控件会自动变黑，文字变白：</p>
<label> 输入框: <input type="text"> </label></pre>
</div>
<h3 data-id="heading-3">accent-color:red;</h3>
<p>它会自动计算出不同焦点下，表单控件的颜色</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
body {
accent-color:red;
}
</style>
<input type="checkbox" checked> 选择框
<br><br>
<input type="radio" checked> 单选
<br><br>
<input type="range"> 拖动滑块</pre>
</div>
<h3 data-id="heading-4">fit-content</h3>
<p>它是根据内容，来控制容器的大小的</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
div {
background: skyblue;
width: fit-content;
margin: auto;
padding: 20px;
}
</style>
<div>我是一个 div，使用缩水大法</div></pre>
</div>
<h3 data-id="heading-5">overscroll-behavior: contain;</h3>
<p>解决一个 div，有自己的滚动条。然后用户在这个 div 里滚动到底部时，，整个页面会开始滚动。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><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></pre>
</div>
<h3 data-id="heading-6">text-wrap: balance;</h3>
<p>它可以平衡行数之前的词语长度，使其做到尽可能的均衡，整体观感上，要舒服很多！ 注意，这个属性，只支持 6 行以内，所以尽可能用在一些短小的地方，比如标题！</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><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></pre>
</div>
<h3 data-id="heading-7">text-underline-offset: 0.25em;</h3>
<p>英文中的 g、y ，是不是这些字母，下面会拖一个尾巴。而 < a > 的原生效果是，这个 underline 线会重叠到这些小尾巴上。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
a:not() {
text-underline-offset: 0.25em;
}
</style>
<p> <a href="#">这是一个正文链接 (g/y)</a> </p>
<p> <a href="#" class="btn">这是一个按钮链接(不使用该 CSS) (g/y)</a> </p></pre>
</div>
<h3 data-id="heading-8">outline-offset ！</h3>
<p>不计入盒模型尺寸的轮廓线。 把鼠标移上去，就会有扩散效果了。而且，只是扩散，不会影响各种尺寸。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><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></pre>
</div>
<div>
<div>
<h3 data-id="heading-9">scroll-margin-top</h3>
<p>怎么形容这个场景呢？你有个固定的顶部导航栏。它 高度是 100px 。然后你单击链接，是一个滚动到某个 #part 标题的链接，你会发现默认滚动后，它是紧挨着顶部的。那么导航栏就挡住了（我也不太能说清，大家看下面的例子吧）..... 如何不介入 js 来解决这个问题呢？就是scroll-margin-top ！</p>
<p>注意，要在本地建一个 html 来运行，否则会乱跳转！</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
nav {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: rgba(255,0,0,0.5);
}
h2 {
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></pre>
</div>
<h3 data-id="heading-10">scrollbar-gutter: stable;</h3>
<p>解决 一个滚动条跳动 Bug 。就是页面的内容，动态变多，会突然出现滚动条。然后画面会跳动一下。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
div {
width: 200px;
height: 150px;
overflow-y: auto;
border: 2px solid #333;
scrollbar-gutter: stable; /* 关键 */
}
</style>
<div> 虽然内容很少，不需要滚动， 但请注意右侧预留的空白槽。 这保证了内容增加时不会发生位移。 </div></pre>
</div>
</div>
<div>
<div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div>
</div>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19572845
頁:
[1]