6 個沒人講過的 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
• 校對者：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 個 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)鍵字會讓 CSS 文件看起來很混亂。

而一個更簡單的覆蓋樣式定義的方法，是使用 all 屬性。

all 共有 3 個可用的屬性值 —— initial、inherit 和 unset。

.header {
    all: initial;
    color: blue;
    font-size: 14px;
}

all: initial 會將元素的所有屬性設(shè)置為回退值或初始值。

從 Chrome 版本 37 和 Firefox 版本 27 開始它們都支持了這個屬性。Edge 瀏覽器也支持此屬性，但 IE 并不支持。

2. writing-mode

我最近寫過一篇有關(guān)尋找設(shè)計(jì)靈感的神奇地方的文章，里面列舉的網(wǎng)站和我偶然發(fā)現(xiàn)的許多站點(diǎn)中，文本都是在一側(cè)豎直排列的。

在上圖的右側(cè)（滾動條附近），我們可以看到側(cè)邊豎直排列的文本，而這恰好就是一種顯示附加信息的巧妙方法。

writing-mode 屬性可以讓我們實(shí)現(xiàn)這個效果。

該屬性支持以下值：

• sideways-rl：文本和其他內(nèi)容從上到下垂直排列，并向右橫向放置。
• sideways-lr：和 sideways-rl 一樣，文本和其他內(nèi)容從上到下垂直排列，但向左傾斜。
• vertical-rl：文本和其他內(nèi)容從上到下垂直排列，從右到左水平排列。如果有兩行或更多行，則這些行會被放置在前一行的左側(cè)。
• vertical-lr：與 vertical-rl 不同，水平地將文本從左到右排列，并且如果有兩行或更多行，則這些行會被放置在前一行的右側(cè)。

horizontal-tb 屬性則實(shí)現(xiàn)默認(rèn)排列文本的效果。

你可以在這里找到相關(guān)實(shí)現(xiàn)和代碼塊。

3. background-clip

這是一個有趣的屬性，它讓我們可以為元素的背景設(shè)置自定義圖形。

我們的自定義圖形可以延伸到元素的邊框，內(nèi)邊距盒或內(nèi)容盒。

以下是此屬性的簡短實(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 屬性指定是否可以選擇元素的文本。

這對除文本框之外的內(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;
}

此屬性也可用于確保選擇了整個元素。

.force-select {
    user-select: all;
    -webkit-user-select: all; /* Chrome 49+ */
    -moz-user-select: all; /* Firefox 43+ */

}

你可以在這里找到完整的說明。

5. white-space

在使用 text-overflow 的時候，該屬性非常有用，因?yàn)樗试S我們控制元素的文本流。

它接受 nowrap、pre、pre-wrap、pre-line 和 normal 作為屬性值。

nowrap 可防止文本環(huán)繞在元素的寬度和高度內(nèi)，并使其溢出。

pre 值強(qiáng)制瀏覽器渲染代碼中默認(rèn)會去除的換行符和空格。pre-wrap 值和 pre 值作用相同，但是它不會讓文本溢出元素。

pre-line 屬性會在代碼中相應(yīng)的地方換行，但是不會顯示多余的空格。

通過以下示例可以清楚地看出它們的區(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è)置為邊框。

下面的圖像就展示了這個屬性的應(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 之外，還同時使用著 CSS 和 HTML。了解更多的 CSS 屬性知識，能夠幫助我們更快、更好地構(gòu)建 Web 應(yīng)用程序。

盡管我分享了一些較少被人們所提及的 CSS 屬性，但這樣的屬性還有很多。

雖然 CSS 已有 20 多年的歷史了，但它仍然具有許多奇技淫巧。

知道這些 CSS 屬性可以實(shí)現(xiàn)具有藝術(shù)氣息的網(wǎng)站。

感謝閱讀！

如果發(fā)現(xiàn)譯文存在錯誤或其他需要改進(jìn)的地方，歡迎到 掘金翻譯計(jì)劃 對譯文進(jìn)行修改并 PR，也可獲得相應(yīng)獎勵積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。