6 個(gè)你以前從未了解過的有趣CSS屬性
英文 | https://javascript.plainenglish.io/6-css-properties-nobody-is-talking-about-e6cab5138d02
翻譯 | 楊小二
1、all
.header{color: blue ;font-size: 14px ;}
但是，一遍又一遍地編寫相同的關(guān)鍵字會(huì)使 CSS 文件看起來(lái)很混亂。
而更簡(jiǎn)單的方法是使用 all 屬性。
它共有 3 個(gè)屬性值——initial、inherit 和 unset。
.header{all:initial;color: blue;font-size: 14px;}
all:initial 將元素的所有屬性設(shè)置為其退回或初始值。
Chrome 和 Firefox 分別從版本 37 和版本 27 開始支持此屬性。Edge 瀏覽器也支持此屬性，但 Internet Explorer 不支持。
2、writing-mode
我最近寫了一篇關(guān)于尋找設(shè)計(jì)靈感的神奇地方的文章，我偶然發(fā)現(xiàn)了許多文本垂直和橫向排列的網(wǎng)站。
在上圖的右側(cè)（靠近滾動(dòng)條），你可以看到橫向放置的文本，這是顯示附加信息的一種巧妙方式。
writing-mode屬性可以幫助你實(shí)現(xiàn)這一點(diǎn)。
此屬性支持以下值：
sideways-rl：文本和其他內(nèi)容從上到下垂直排列，并向右側(cè)放。
sideways-lr：與 sideways-rl 一樣，文本和其他內(nèi)容從上到下垂直排列，但向左側(cè)向放置。
Vertical-rl：文本和其他內(nèi)容從上到下垂直排列，從右到左水平排列。如果有兩行或更多行，則將這些行放置在前一行的左側(cè)。
Vertical-lr：與 vertical-rl 不同，文本從左到右橫向排列，如果有兩行或更多行，則將這些行放在上一行的右側(cè)。
還有horizontal-tb 表示文本顯示的標(biāo)準(zhǔn)方式。
3、background-clip
這是一個(gè)有趣的屬性，它允許我們?yōu)樵氐谋尘霸O(shè)置自定義圖形。
我們的自定義圖形可以擴(kuò)展到元素的邊框、填充框或內(nèi)容框。
以下是此屬性的簡(jiǎn)短實(shí)現(xiàn)：
HTML：
<p class="border-box">The background extends behind the border.</p><p class="padding-box">The background extends to the inside edge of the border.</p><p class="content-box">The background extends only to the edge of the content box.</p><p class="text">The background is clipped to the foreground 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);}
輸出：
你可以使用自定義圖像并將其設(shè)置為文本的背景，如下所示：
你需要注意的是，需要為 Chrome 添加 -webkit-background-clip 屬性，并確保文本顏色為透明。
4、user-select
如果你不希望你的用戶復(fù)制你網(wǎng)站上的任何文本，那么，你可以使用此屬性進(jìn)行設(shè)置。
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;}
為了保證視覺效果，需要使用此屬性，示例如下：
.force-select {user-select: all;-webkit-user-select: all; /* Chrome 49+ */-moz-user-select: all; /* Firefox 43+ */}
你可以在這個(gè)地址，https://developer.mozilla.org/en-US/docs/Web/CSS/user-select 找到完整的學(xué)習(xí)指南。
5、 white-space
text-overflow屬性在對(duì)文本溢出時(shí)很有用，因?yàn)榇藢傩栽试S你控制元素的文本流。
它的屬性值有：nowrap, pre, pre-wrap,pre-line和normal。
nowrap 屬性可以防止文本在元素寬度和高度內(nèi)換行并允許它溢出。
pre 值強(qiáng)制瀏覽器呈現(xiàn)出現(xiàn)在代碼中默認(rèn)情況下被去除的換行符和空格。與pre-wrap 值的作用相同，只是它還將文本包裹在該元素中。
pre-line 屬性將在代碼中斷行的地方斷行，但不會(huì)呈現(xiàn)額外的空白。
通過以下示例可以清楚地了解這一點(diǎn)：
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;}
輸出：
此屬性非常適合設(shè)計(jì)你的網(wǎng)站。
你可以使用此屬性在元素周圍創(chuàng)建漂亮的邊框。
border-image 允許你將自定義圖像設(shè)置為邊框。
我將使用此圖像來(lái)演示此屬性。
<body><h1>This is a title</h1></body><!-- CSS below -->h1{border: 10px solid transparent;padding: 15px;border-image: url(border.png) 20% round;}
輸出：
此屬性可用于創(chuàng)建精美的卡片或強(qiáng)調(diào)文本的某些部分。
最后的想法
除了 JavaScript 之外，前端開發(fā)人員一直在使用 CSS 和 HTML，了解更多這些可以幫助人們更快、更好地構(gòu)建更好的應(yīng)用程序。
雖然我分享了一些鮮為人知的 CSS 屬性，但還有更多這樣的屬性。
CSS雖然已經(jīng)出現(xiàn)很長(zhǎng)一段時(shí)間了，但它仍然有很多屬性和技巧值得我們?nèi)チ私馀c學(xué)習(xí)。
謝謝你的閱讀！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
