6 個(gè)少有人提的有趣 CSS 屬性
原文地址：6 CSS Properties Nobody Is Talking About 原文作者：Anurag Kanoria 譯文出自：掘金翻譯計(jì)劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2021/6-css-properties-nobody-is-talking-about.md 譯者：霜羽 Hoarfroster 校對(duì)者：zenblo、Chorer
數(shù)十年來，CSS 和 HTML 一直都是互聯(lián)網(wǎng)的基石。
雖然 HTML 能夠負(fù)責(zé)創(chuàng)建網(wǎng)站結(jié)構(gòu)并進(jìn)行圖文排列，但在設(shè)計(jì)網(wǎng)站上卻無能為力。
自 1994 年以來，設(shè)計(jì)網(wǎng)站一直是 CSS 的唯一目的，它是一門描述網(wǎng)站外觀的語言。
多年來，CSS 不斷地推出更多的新屬性，例如 Flexbox（彈性盒）或是 Grid（網(wǎng)格）。
盡管創(chuàng)建 Web 應(yīng)用廣受歡迎且日趨復(fù)雜，但大多數(shù)開發(fā)者仍有很多不了解的 CSS 屬性和技巧。
以下是你可能從未聽說過的 6 個(gè) CSS 屬性：
1. all
你是否曾經(jīng)使用過 CSS 框架呢？如果是的話，我可以肯定你有好幾次都想要根據(jù)自己的喜好覆蓋某些元素的樣式定義。
最常用的方法是使用 CSS 中的 !important 屬性來強(qiáng)調(diào)當(dāng)前屬性，而忽略所有其他設(shè)置和規(guī)則。
.header {
color: blue !important;
font-size: 14px !important;
}
但是，重復(fù)書寫相同的關(guān)鍵字會(huì)讓 CSS 文件看起來很混亂。
而一個(gè)更簡(jiǎn)單的覆蓋樣式定義的方法，是使用 all 屬性。
all 共有 3 個(gè)可用的屬性值 —— initial、inherit 和 unset。
.header {
all: initial;
color: blue;
font-size: 14px;
}
all: initial 會(huì)將元素的所有屬性設(shè)置為回退值或初始值。
從 Chrome 版本 37 和 Firefox 版本 27 開始它們都支持了這個(gè)屬性。Edge 瀏覽器也支持此屬性，但 IE 并不支持。
2. writing-mode
我最近寫過一篇有關(guān)尋找設(shè)計(jì)靈感的神奇地方的文章，里面列舉的網(wǎng)站和我偶然發(fā)現(xiàn)的許多站點(diǎn)中，文本都是在一側(cè)豎直排列的。
在上圖的右側(cè)（滾動(dòng)條附近），我們可以看到側(cè)邊豎直排列的文本，而這恰好就是一種顯示附加信息的巧妙方法。
writing-mode 屬性可以讓我們實(shí)現(xiàn)這個(gè)效果。
該屬性支持以下值：
sideways-rl：文本和其他內(nèi)容從上到下垂直排列，并向右橫向放置。sideways-lr：和sideways-rl一樣，文本和其他內(nèi)容從上到下垂直排列，但向左傾斜。vertical-rl：文本和其他內(nèi)容從上到下垂直排列，從右到左水平排列。如果有兩行或更多行，則這些行會(huì)被放置在前一行的左側(cè)。vertical-lr：與vertical-rl不同，水平地將文本從左到右排列，并且如果有兩行或更多行，則這些行會(huì)被放置在前一行的右側(cè)。
horizontal-tb 屬性則實(shí)現(xiàn)默認(rèn)排列文本的效果。
你可以在這里找到相關(guān)實(shí)現(xiàn)和代碼塊。
3. background-clip
這是一個(gè)有趣的屬性，它讓我們可以為元素的背景設(shè)置自定義圖形。
我們的自定義圖形可以延伸到元素的邊框，內(nèi)邊距盒或內(nèi)容盒。
以下是此屬性的簡(jiǎn)短實(shí)現(xiàn)：
HTML：
<p class="border-box">背景延伸到邊框。</p>
<p class="padding-box">背景延伸到邊框的內(nèi)部邊緣。</p>
<p class="content-box">背景僅延伸到內(nèi)容盒的邊緣。</p>
<p class="text">背景被裁剪為前景文本。</p>
CSS：
p {
border: .8em darkviolet;
border-style: dotted double;
margin: 1em 0;
padding: 1.4em;
background: linear-gradient(60deg, red, yellow, red, yellow, red);
font: 900 1.2em sans-serif;
text-decoration: underline;
}
.border-box {
background-clip: border-box;
}
.padding-box {
background-clip: padding-box;
}
.content-box {
background-clip: content-box;
}
.text {
background-clip: text;
-webkit-background-clip: text;
color: rgba(0, 0, 0, .2);
}
效果：
我們也可以使用自定義圖片作為文本的背景：
值得注意的是，在 Chrome 上我們需要使用 -webkit-background-clip 屬性，并確保文本顏色設(shè)置為透明。
4. user-select
如果我們的網(wǎng)站上有著一些不想讓用戶復(fù)制的文本，我們可以使用此屬性。
user-select 屬性指定是否可以選擇元素的文本。
這對(duì)除文本框之外的內(nèi)容沒有任何影響。
.row-of-icons {
-webkit-user-select: none; /* Chrome & Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
此屬性也可用于確保選擇了整個(gè)元素。
.force-select {
user-select: all;
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
}
你可以在這里找到完整的說明。
5. white-space
在使用 text-overflow 的時(shí)候，該屬性非常有用，因?yàn)樗试S我們控制元素的文本流。
它接受 nowrap、pre、pre-wrap、pre-line 和 normal 作為屬性值。
nowrap 可防止文本環(huán)繞在元素的寬度和高度內(nèi)，并使其溢出。
pre 值強(qiáng)制瀏覽器渲染代碼中默認(rèn)會(huì)去除的換行符和空格。pre-wrap 值和 pre 值作用相同，但是它不會(huì)讓文本溢出元素。
pre-line 屬性會(huì)在代碼中相應(yīng)的地方換行，但是不會(huì)顯示多余的空格。
通過以下示例可以清楚地看出它們的區(qū)別：
HTML:
<div>
<p class='zero'>
Some text
</p>
<p class='first'>
Some text
</p>
<p class='second'>
Some text
</p>
<p class='third'>
Some text
</p>
<p class='fourth'>
Some text
</p>
</div>
CSS:
div {
width: 100px;
}
p {
background: red;
font-size: 2rem;
}
.first {
white-space: nowrap;
}
.second {
white-space: pre;
}
.third {
white-space: pre-line;
}
.fourth {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
效果:
6. border-image
此屬性非常適合設(shè)計(jì)我們的網(wǎng)站，我們可以使用此屬性在元素周圍創(chuàng)建漂亮的邊框 —— border-image 允許你將自定義圖像設(shè)置為邊框。
下面的圖像就展示了這個(gè)屬性的應(yīng)用：
HTML 和 CSS 代碼如下：
<body>
<h1>This is a title</h1>
</body>
h1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
效果:
此屬性可用于創(chuàng)建精美卡片或強(qiáng)調(diào)部分文本。
最后的想法
前端開發(fā)者們除了使用 JavaScript 之外，還同時(shí)使用著 CSS 和 HTML。了解更多的 CSS 屬性知識(shí)，能夠幫助我們更快、更好地構(gòu)建 Web 應(yīng)用程序。
盡管我分享了一些較少被人們所提及的 CSS 屬性，但這樣的屬性還有很多。
雖然 CSS 已有 20 多年的歷史了，但它仍然具有許多奇技淫巧。
知道這些 CSS 屬性可以實(shí)現(xiàn)具有藝術(shù)氣息的網(wǎng)站。
感謝閱讀！
如果發(fā)現(xiàn)譯文存在錯(cuò)誤或其他需要改進(jìn)的地方，歡迎到 掘金翻譯計(jì)劃 對(duì)譯文進(jìn)行修改并 PR，也可獲得相應(yīng)獎(jiǎng)勵(lì)積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。
掘金翻譯計(jì)劃 是一個(gè)翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計(jì)、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請(qǐng)持續(xù)關(guān)注 掘金翻譯計(jì)劃、官方微博、知乎專欄。