英文 | https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a2878200474
翻譯 | 楊小愛
在今天的文章中，我們将分享一些非常有用的 CSS 代碼片段，它們簡短而強大。
使用這些代碼片段，您可以立即改善網站的外觀。
下面是 11 個非常有用的 CSS 代碼片段：
1、滾動效果
html {
scroll-behavior: smooth;
} 這行簡單的代碼可以讓您免于編寫一些複雜的 JavaScript。
此屬性可以定義，當使用者單擊以卷軸欄中的錨定位置為目标的連結時，浏覽器的滾動位置是跳躍還是平滑過渡。
浏覽器Chrome 版本 61+、Firefox 36+ 和 Edge 版本 79+ 均支援此屬性。
2、剪輯路徑屬性
clip-path: circle(40%);
clip-path: ellipse(130px 140px at 10% 20%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z'); clip-path CSS 屬性允許我們控制可以顯示剪輯區域的哪些部分。
顯示區域内的内容，而隐藏外部部分。
浏覽器Chrome 版本 55+ 和 Edge 版本 12+ 均支援此屬性。
3、過濾屬性
filter: drop-shadow(16px 16px 20px red); 使用 CSS one-liner，您可以輕松地為圖像添加令人驚歎的濾鏡。
此屬性允許輕松應用視覺效果，如投影、模糊、顔色偏移、反轉顔色等。
下面給出了其中一些屬性。
filter: blur(5px);
filter: contrast(200%);
filter: grayscale(80%); 浏覽器Chrome 版本 53+、Firefox 版本 35+ 和 Edge 版本 12+ 均支援此屬性。
4、僞類
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
} 函數 :is() 幫助我們使用選擇器清單将相同的樣式應用于一堆不同的元素。
這些選擇器清單将作為參數傳遞給 :is() 函數，選擇器清單可以選擇的任何元素都會受到影響。
它可以在編寫簡短的 CSS 檔案和實作 DRY（不要重複自己）原則時派上用場。
浏覽器Chrome 版本 10+、Chrome 版本 88+、Firefox 版本 78+ 、 Edge 版本 88+、 Firefox 版本 29+ 、Edge 版本 12+ 均支援此屬性。
5、使用者選擇屬性
div {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
} 曾經想阻止您的使用者複制文本嗎？如果是，則您可以使用user-select 屬性實作此功能。
user-select 屬性指定是否可以選擇文本。
浏覽器Chrome 版本 54+、Firefox 版本 69+ 和 Edge 版本 72+ 均支援此屬性。
6、改變光标
div{
cursor:alias;
} 您可以使用這個簡單而強大的屬性輕松更改光标的外觀。
您可以使用大量的值。 不同的遊标傳達不同的含義。
例如，可移動對象有一個 cursor:grab 屬性來表示它們是可拖動的元素。
浏覽器Chrome 版本 1+、Firefox 版本 1+ 和 Edge 版本 12+ 均支援此屬性。
7、插入符号顔色
input {
caret-color: red;
} 隻需使用簡單的 CSS，您就可以更改輸入、文本區域或任何可編輯元素中光标的顔色。
根據網站的不同，它可以為您的網站提供統一性。
浏覽器Chrome 版本 57+、Firefox 版本 53+ 和 Edge 版本 79+ 均支援此屬性。
8、自定義滾動條
::-webkit-scrollbar {
width: 20px;
} 您可以使用此屬性輕松自定義滾動條，為您的網站提供獨特的觸感。
此外，您還可以輕松更改滾動條軌道和拇指。
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid red;
} 9、書寫模式
writing-mode: vertical-lr; 正确使用寫作模式可以幫助您為網站添加有趣的變化。
書寫模式設定文本行是水準布局還是垂直布局。 您還可以通過将其應用于 HTML 檔案的根元素來設定整個項目的效果。
浏覽器Chrome 版本 48+、Firefox 版本 41+ 和 Edge 版本 12+ 均支援此屬性。
10、邊框盒子
box-sizing: border-box;
width:100%; 将 box-sizing 設定為 border-box 是避免任何意外填充問題的巧妙技巧。
它告訴浏覽器在您在該元素的寬度和高度本身中指定的值中包含任何邊框和填充。
例如，如果您的元素寬度為 125 像素，那麼您添加的任何填充都将包含在該寬度（125 像素）本身中。
浏覽器Chrome 版本 10+、Firefox 版本 29+ 和 Edge 版本 12+ 均支援此屬性。
11、将物品放在中間
place-items: center stretch; 當與網格結合使用時，此屬性在同時沿塊和内聯方向對齊項目時非常有用（即 align-items 和 justify-items 屬性）。
但是，值得一提的是，Internet Explorer 10 及更早版本不支援 align-items 屬性。
但浏覽器Chrome 版本 59+、Firefox 版本 45+ 和 Edge 版本 79+ 均支援此屬性。
結論
HTML 展示了資料的結構，而 CSS 則對其進行了樣式設定并使其具有可展示性。
每個 Web 開發人員在其職業生涯的某個階段都會使用 CSS，并且了解強大的單行代碼會派上用場。
此外，了解這些屬性還可以讓您避免編寫複雜的 JavaScript 代碼。
但是，值得一提的是，您應該在使用任何 CSS 屬性之前檢查浏覽器相容性。
感謝您閱讀本文，如果您覺得今天的内容對您有所幫助，也請分享給您身邊做開發的朋友。