🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
aspect-ratio
寬高比
<style>
div {
width: 190px; /* 注意，這個數字要能容納完內容才有效 */
aspect-ratio: 16 / 9;
background: tomato;
}
</style>
<div>我永遠保持 16:9</div>
如果，你 aspect-ratio 的值寫成 1 ，那麼就可以得到一個完美的正方形了！
object-fit
它有兩個值，一個是 cover （圖片完全覆蓋容器，且圖片長寬不失真），一個是 scale-down （只保證圖片長寬不失真）。
<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;
啓動瀏覽器自適應 深淺色模式！
<style>
:root {
color-scheme: dark light; /* 自動變色 */
}
</style>
<h3>切換系統深淺模式來測試</h3>
<p>在深色模式下，下面的原生控件會自動變黑，文字變白：</p>
<label> 輸入框: <input type="text"> </label>
accent-color:red;
它會自動計算出不同焦點下，表單控件的顏色
<style>
body {
accent-color:red;
}
</style>
<input type="checkbox" checked> 選擇框
<br><br>
<input type="radio" checked> 單選
<br><br>
<input type="range"> 拖動滑塊
fit-content
它是根據內容，來控制容器的大小的
<style>
div {
background: skyblue;
width: fit-content;
margin: auto;
padding: 20px;
}
</style>
<div>我是一個 div，使用縮水大法</div>
overscroll-behavior: contain;
解決一個 div，有自己的滾動條。然後用户在這個 div 裏滾動到底部時，，整個頁面會開始滾動。
<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 行以內，所以儘可能用在一些短小的地方，比如標題！
<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 線會重疊到這些小尾巴上。
<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 ！
不計入盒模型尺寸的輪廓線。 把鼠標移上去，就會有擴散效果了。而且，只是擴散，不會影響各種尺寸。
<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 來運行，否則會亂跳轉！
<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 。就是頁面的內容，動態變多，會突然出現滾動條。然後畫面會跳動一下。
<style>
div {
width: 200px;
height: 150px;
overflow-y: auto;
border: 2px solid #333;
scrollbar-gutter: stable; /* 關鍵 */
}
</style>
<div> 雖然內容很少，不需要滾動， 但請注意右側預留的空白槽。 這保證了內容增加時不會發生位移。 </div>
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
