戳藍字「前端技術優選」關注我們哦！
數十年來，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 並不支持。
2.writing-mode我最近寫過一篇有關尋找設計靈感的神奇地方的文章，裡面列舉的網站和我偶然發現的許多站點中，文本都是在一側豎直排列的。
來源：httpster在上圖的右側（滾動條附近），我們可以看到側邊豎直排列的文本，而這恰好就是一種顯示附加信息的巧妙方法。
writing-mode屬性可以讓我們實現這個效果。
該屬性支持以下值：
horizontal-tb屬性則實現默認排列文本的效果。
來源：MDN Web 文檔你可以在這裡找到相關實現和代碼塊。
3.background-clip這是一個有趣的屬性，它讓我們可以為元素的背景設置自定義圖形。
我們的自定義圖形可以延伸到元素的邊框，內邊距盒或內容盒。
以下是此屬性的簡短實現：
HTML：
<pclass="border-box">背景延伸到邊框。</p><pclass="padding-box">背景延伸到邊框的內部邊緣。</p><pclass="content-box">背景僅延伸到內容盒的邊緣。</p><pclass="text">背景被裁剪為前景文本。</p>CSS：
p{border:.8emdarkviolet;border-style:dotteddouble;margin:1em0;padding:1.4em;background:linear-gradient(60deg,red,yellow,red,yellow,red);font:9001.2emsans-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屬性，並確保文本顏色設置為透明。
4.user-select如果我們的網站上有着一些不想讓用戶複製的文本，我們可以使用此屬性。
user-select屬性指定是否可以選擇元素的文本。
這對除文本框之外的內容沒有任何影響。
.row-of-icons{-webkit-user-select:none;/*Chrome&Safariall*/-moz-user-select:none;/*Firefoxall*/-ms-user-select:none;/*IE10+*/user-select:none;}此屬性也可用於確保選擇了整個元素。
.force-select{user-select:all;-webkit-user-select:all;/*Chrome49+*/-moz-user-select:all;/*Firefox43+*/}你可以在這裡找到完整的說明。
5.white-space在使用text-overflow的時候，該屬性非常有用，因為它允許我們控制元素的文本流。
它接受nowrap、pre、pre-wrap、pre-line和normal作為屬性值。
nowrap可防止文本環繞在元素的寬度和高度內，並使其溢出。
pre值強制瀏覽器渲染代碼中默認會去除的換行符和空格。pre-wrap值和pre值作用相同，但是它不會讓文本溢出元素。
pre-line屬性會在代碼中相應的地方換行，但是不會顯示多餘的空格。
通過以下示例可以清楚地看出它們的區別：
HTML:
<div><pclass='zero'>Sometext</p><pclass='first'>Sometext</p><pclass='second'>Sometext</p><pclass='third'>Sometext</p><pclass='fourth'>Sometext</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此屬性非常適合設計我們的網站，我們可以使用此屬性在元素周圍創建漂亮的邊框 ——border-image允許你將自定義圖像設置為邊框。
下面的圖像就展示了這個屬性的應用：
圖源: MDN 網站HTML 和 CSS 代碼如下：
<body><h1>Thisisatitle</h1></body>h1{border:10pxsolidtransparent;padding:15px;border-image:url(border.png)20%round;}效果:
圖源作者此屬性可用於創建精美卡片或強調部分文本。
最後的想法前端開發者們除了使用 JavaScript 之外，還同時使用着 CSS 和 HTML。了解更多的 CSS 屬性知識，能夠幫助我們更快、更好地構建 Web 應用程序。
儘管我分享了一些較少被人們所提及的 CSS 屬性，但這樣的屬性還有很多。
雖然 CSS 已有 20 多年的歷史了，但它仍然具有許多奇技淫巧。
知道這些 CSS 屬性可以實現具有藝術氣息的網站。
感謝閱讀！
留言列表