英文 | https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a2878200474

翻譯 | 楊小愛(ài)

html {  scroll-behavior: smooth;}

這行簡(jiǎn)單的代碼可以讓您免于編寫(xiě)一些復(fù)雜的 JavaScript。

此屬性可以定義，當(dāng)用戶單擊以滾動(dòng)框中的錨定位置為目標(biāo)的鏈接時(shí)，瀏覽器的滾動(dòng)位置是跳躍還是平滑過(guò)渡。

瀏覽器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 屬性允許我們控制可以顯示剪輯區(qū)域的哪些部分。

顯示區(qū)域內(nèi)的內(nèi)容，而隱藏外部部分。

瀏覽器Chrome 版本 55+ 和 Edge 版本 12+ 均支持此屬性。

3、過(guò)濾屬性

filter: drop-shadow(16px 16px 20px red);

使用?CSS one-liner，您可以輕松地為圖像添加令人驚嘆的濾鏡。

此屬性允許輕松應(yīng)用視覺(jué)效果，如投影、模糊、顏色偏移、反轉(zhuǎn)顏色等。

下面給出了其中一些屬性。

filter: blur(5px);filter: contrast(200%);filter: grayscale(80%);

瀏覽器Chrome 版本 53+、Firefox 版本 35+ 和 Edge 版本 12+ 均支持此屬性。

4、偽類(lèi)

:is(header, main, footer) p:hover {  color: red;  cursor: pointer;}

函數(shù)?:is()?幫助我們使用選擇器列表將相同的樣式應(yīng)用于一堆不同的元素。

這些選擇器列表將作為參數(shù)傳遞給 :is() 函數(shù)，選擇器列表可以選擇的任何元素都會(huì)受到影響。

它可以在編寫(xiě)簡(jiǎn)短的 CSS 文件和實(shí)現(xiàn) DRY（不要重復(fù)自己）原則時(shí)派上用場(chǎng)。

瀏覽器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 */}

曾經(jīng)想阻止您的用戶復(fù)制文本嗎？如果是，則您可以使用user-select 屬性實(shí)現(xiàn)此功能。

user-select 屬性指定是否可以選擇文本。

瀏覽器Chrome 版本 54+、Firefox 版本 69+ 和 Edge 版本 72+ 均支持此屬性。

6、改變光標(biāo)

div{   cursor:alias;}

您可以使用這個(gè)簡(jiǎn)單而強(qiáng)大的屬性輕松更改光標(biāo)的外觀。

您可以使用大量的值。 不同的游標(biāo)傳達(dá)不同的含義。

例如，可移動(dòng)對(duì)象有一個(gè) cursor:grab 屬性來(lái)表示它們是可拖動(dòng)的元素。

瀏覽器Chrome 版本 1+、Firefox 版本 1+ 和 Edge 版本 12+ 均支持此屬性。

7、插入符號(hào)顏色

input {  caret-color: red;}

只需使用簡(jiǎn)單的 CSS，您就可以更改輸入、文本區(qū)域或任何可編輯元素中光標(biāo)的顏色。

根據(jù)網(wǎng)站的不同，它可以為您的網(wǎng)站提供統(tǒng)一性。

瀏覽器Chrome 版本 57+、Firefox 版本 53+ 和 Edge 版本 79+ 均支持此屬性。

8、自定義滾動(dòng)條

::-webkit-scrollbar {  width: 20px;}

您可以使用此屬性輕松自定義滾動(dòng)條，為您的網(wǎng)站提供獨(dú)特的觸感。

此外，您還可以輕松更改滾動(dòng)條軌道和拇指。

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、書(shū)寫(xiě)模式

writing-mode: vertical-lr;

正確使用寫(xiě)作模式可以幫助您為網(wǎng)站添加有趣的變化。

書(shū)寫(xiě)模式設(shè)置文本行是水平布局還是垂直布局。 您還可以通過(guò)將其應(yīng)用于 HTML 文件的根元素來(lái)設(shè)置整個(gè)項(xiàng)目的效果。

瀏覽器Chrome 版本 48+、Firefox 版本 41+ 和 Edge 版本 12+ 均支持此屬性。

10、邊框盒子

box-sizing: border-box;width:100%;

將 box-sizing 設(shè)置為 border-box 是避免任何意外填充問(wèn)題的巧妙技巧。

它告訴瀏覽器在您在該元素的寬度和高度本身中指定的值中包含任何邊框和填充。

例如，如果您的元素寬度為 125 像素，那么您添加的任何填充都將包含在該寬度（125 像素）本身中。

瀏覽器Chrome 版本 10+、Firefox 版本 29+ 和 Edge 版本 12+ 均支持此屬性。

11、將物品放在中間

place-items: center stretch;

當(dāng)與網(wǎng)格結(jié)合使用時(shí)，此屬性在同時(shí)沿塊和內(nèi)聯(lián)方向?qū)R項(xiàng)目時(shí)非常有用（即 align-items 和 justify-items 屬性）。

但是，值得一提的是，Internet Explorer 10 及更早版本不支持 align-items 屬性。

但瀏覽器Chrome 版本 59+、Firefox 版本 45+ 和 Edge 版本 79+ 均支持此屬性。

結(jié)論

HTML 展示了數(shù)據(jù)的結(jié)構(gòu)，而 CSS 則對(duì)其進(jìn)行了樣式設(shè)置并使其具有可展示性。

每個(gè) Web 開(kāi)發(fā)人員在其職業(yè)生涯的某個(gè)階段都會(huì)使用 CSS，并且了解強(qiáng)大的單行代碼會(huì)派上用場(chǎng)。

此外，了解這些屬性還可以讓您避免編寫(xiě)復(fù)雜的 JavaScript 代碼。

但是，值得一提的是，您應(yīng)該在使用任何 CSS 屬性之前檢查瀏覽器兼容性。

感謝您閱讀本文，如果您覺(jué)得今天的內(nèi)容對(duì)您有所幫助，也請(qǐng)分享給您身邊做開(kāi)發(fā)的朋友。

祝編程愉快！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)