6 個沒人講過的 CSS 屬性

數十年來，CSS 和 HTML 一直都是互聯網的基石。

雖然 HTML 能夠負責創建網站結構並進行圖文排列，但在設計網站上卻無能爲力。

自 1994 年以來，設計網站一直是 CSS 的唯一目的，它是一門描述網站外觀的語言。

多年來，CSS 不斷地推出更多的新屬性，例如 Flexbox（彈性盒）或是 Grid（網格）。

儘管創建 Web 應用廣受歡迎且日趨複雜，但大多數開發者仍有很多不瞭解的 CSS 屬性和技巧。

以下是你可能從未聽說過的 6 個 CSS 屬性：

  1. all

你是否曾經使用過 CSS 框架呢？如果是的話，我可以肯定你有好幾次都想要根據自己的喜好覆蓋某些元素的樣式定義。

最常用的方法是使用 CSS 中的 !important 屬性來強調當前屬性，而忽略所有其他設置和規則。

.header {
    color: blue !important;
    font-size: 14px !important;
}

但是，重複書寫相同的關鍵字會讓 CSS 文件看起來很混亂。

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

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

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

all: initial 會將元素的所有屬性設置爲回退值或初始值。

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

  1. writing-mode

我最近寫過一篇有關尋找設計靈感的神奇地方的文章，裏面列舉的網站和我偶然發現的許多站點中，文本都是在一側豎直排列的。

來源：httpster

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

writing-mode 屬性可以讓我們實現這個效果。

該屬性支持以下值：

horizontal-tb 屬性則實現默認排列文本的效果。

來源：MDN Web 文檔

你可以在這裏找到相關實現和代碼塊。

  1. background-clip

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

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

以下是此屬性的簡短實現：

HTML：

<p class="border-box">背景延伸到邊框。</p>
<p class="padding-box">背景延伸到邊框的內部邊緣。</p>
<p class="content-box">背景僅延伸到內容盒的邊緣。</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 屬性，並確保文本顏色設置爲透明。

  1. user-select

如果我們的網站上有着一些不想讓用戶複製的文本，我們可以使用此屬性。

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

這對除文本框之外的內容沒有任何影響。

.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+ */

}

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

  1. white-space

在使用 text-overflow 的時候，該屬性非常有用，因爲它允許我們控制元素的文本流。

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

nowrap 可防止文本環繞在元素的寬度和高度內，並使其溢出。

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

pre-line 屬性會在代碼中相應的地方換行，但是不會顯示多餘的空格。

通過以下示例可以清楚地看出它們的區別：

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;
}

效果:

圖源作者

  1. border-image

此屬性非常適合設計我們的網站，我們可以使用此屬性在元素周圍創建漂亮的邊框 —— border-image 允許你將自定義圖像設置爲邊框。

下面的圖像就展示了這個屬性的應用：

圖源: MDN 網站

HTML 和 CSS 代碼如下：

<body>
<h1>This is a title</h1>
</body>
h1 {
    border: 10px solid transparent;
    padding: 15px;
    border-image: url(border.png) 20% round;
}

效果:

圖源作者

此屬性可用於創建精美卡片或強調部分文本。

最後的想法

前端開發者們除了使用 JavaScript 之外，還同時使用着 CSS 和 HTML。瞭解更多的 CSS 屬性知識，能夠幫助我們更快、更好地構建 Web 應用程序。

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

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

知道這些 CSS 屬性可以實現具有藝術氣息的網站。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/XKpQcsusUN1Pi7GJNWhVSw

猜你喜歡