> CSS不是一種過於復雜的語言。但是，即使您一直在寫CSS多年，您仍然可能會遇到新事物 - 您從未使用過的屬性，從未考慮過的價值觀或您從未知道的規範細節。
在我的研究中，我一直都遇到了新的小花絮，所以我想我會在這篇文章中分享其中的一些。誠然，這篇文章中的所有內容並不是所有的直接實用價值，但也許您可以在心理上提交其中的一些以供以後使用。>
鑰匙要點>在CSS中註意，在身體元素上僅使用一種顏色屬性，將其設置為黃色。如您所見，頁面上的所有內容都是黃色的，包括：
缺失圖像上顯示的alt文本
列表元素上的邊框
此屬性描述了元素文本的前景
>
的前景顏色 內容。另外，它用於提供潛在的間接值
…對於接受顏色值的任何其他屬性。
>我想不出任何有資格的“前景”的東西，但是如果您這樣做，請在評論中告訴我們。
>>您可能已經使用了數百次可見性屬性。最常用的值是可見的（所有元素的默認值）和隱藏的值，這使元素消失，同時允許其仍然佔據空間，就好像在那裡一樣（與顯示不同：無）。
>可見性屬性的三分之一且很少使用的值是崩潰的。此功能與隱藏在表行，表行組，表列和表列組之外的所有元素上的工作方式相同。對於這些基於表的元素，崩潰的值應該與顯示相似：無，因此折疊行/列所佔據的空間可以被其他內容佔據。>
不幸的是，瀏覽器處理崩潰的方式不一致。嘗試以下演示：請參見筆的可見性：codepen上的sitepoint（@sitepoint）崩潰。
CSS-tricks年鑑建議不要使用它，因為瀏覽器不一致。
從我的觀察值中：
在Chrome中，如果您應用崩潰或隱藏，則沒有什麼區別（請參閱此錯誤報告和評論）
> 在Firefox，Opera和IE11中，崩潰似乎完全按照應有的響應：該行被刪除，下面的行移動。請注意前向斜線，類似於字體速記和邊界 - 拉迪烏斯的寫作方式。斜線允許您在支持瀏覽器的位置後包含一個背景大小的值。
因此，語法看起來像這樣：
><span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
>使用此演示在瀏覽器中對其進行測試：
請參閱codepen上的sitepoint（@sitepoint）的筆記新背景速記值。
關於瀏覽器的支持，這些新價值似乎在所有現代瀏覽器中都可以正常工作，但是您可能必須為任何不支持的瀏覽器提供良好的後備，因此它優雅地降低了。
4。剪輯屬性僅在絕對位置的元素
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
<span><span>.example</span> {
</span> <span>background: aquamarine <span>url(img.png)</span>
</span> no-repeat
scroll
center center <span>/ 50%
</span> content-box content-box<span>;
</span><span>}</span>請參閱codepen上的sitepoint（@sitepoint）的筆sifju。
>您還可以將元素設置為位置：固定，因為，根據規格，固定位置元素也有資格為“絕對位置”元素。
5。垂直百分比是相對於容器寬度的，而不是高度
>。
這是一個示例，您可以使用範圍滑塊進行調整，因此您可以看到效果：請參閱codepen上的sitepoint（@sitepoint）的筆qlnpm。
請注意，內部框上聲明了3個“垂直”百分比（頂部和底部填充物以及底部邊距）。當滑塊移動時，它僅更改容器寬度。但是，其他值對此發生了變化，如頁面上的輸出所示，表明這些值（稱為百分比時）基於容器寬度。6。邊境財產有點像Inception
>我們都在某個時候完成了此操作：
，但不要忘記，邊界屬性所代表的每個屬性本身都是速記屬性。因此，只能宣布邊境寬度：
<span><span>.example</span> {
</span> <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>>這將為四個邊界中的每個邊界設置不同的寬度。邊界彩色和邊界風格也是如此，如這個可怕的演示中所示：
請參閱codepen上的sitepoint（@sitepoint）的筆多個邊框速記。
此外，這些特性中的每一個都可以通過邊界左式，邊界寬度，邊界底彩等進一步分解。<span><span>.example</span> {
</span> <span>position: absolute;
</span> <span>clip: rect(110px, 160px, 170px, 60px);
</span><span>}</span>>但是，您無法使用常規邊框速記為不同側面設置不同的值。因此，它的速記是速記內部的速記，但不完全是。
>我知道這個列表上的某些東西會讓您震驚。
根據規格：>，這是標準的
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
不幸的是，Firefox是唯一支持這些新屬性的瀏覽器，並且（我假設是向後兼容），在速記中不支持它們。
在Firefox中嘗試下面的演示：請參閱codepen上的sitepoint（@sitepoint）的筆hapgb。
演示正在使用長達值來執行此操作。最終，這將是一個艱難的問題，因為目前，任何看到文本編寫額外價值的瀏覽器都會使整個聲明無效，這顯然不利於向後兼容。
8。邊界寬度屬性接受關鍵字值>並不是完全令人震驚，這並不是什麼新鮮事物，但是除了標準長度值（例如5px或1em）之外，邊界寬度屬性還接受三個關鍵字值：中，薄和厚。
實際上，邊界寬度屬性的初始值是“中等”。下面的演示使用“厚”：
>瀏覽器呈現這些關鍵字值時，規格不需要它們將其映射到特定的長度值，但是從我看來，所有瀏覽器似乎都使用1PX，3PX和5PX。
9。沒有人使用邊界圖像>我在一段時間後寫了有關CSS3邊界圖像屬性的文章。除IE10及以下外，所有現代瀏覽器都支持該功能。但是有人在乎嗎？
>
>這似乎是一個非常整潔的功能，使您可以創建流體的邊框圖像。在此演示中使用調整大小的句柄對其進行測試：> codepen上的sitepoint（@sitepoint）請參見筆邊界圖像演示。
這個在包括IE8在內的任何地方都有支持，看起來像這樣：
>
<span>background: [background-color] [background-image] [background-repeat] </span> [background-attachment] [background-position] <span>/ [ background-size] </span> [background-origin] [background-clip]<span>;</span>
請參閱codepen上的sitepoint（@sitepoint）的鋼筆空單元演示。
在這種情況下，我必須確保邊界可見且不會倒塌，並且我不得不在細胞邊界之間添加一些間距。在某些情況下，此屬性不會具有視覺效果，因為在表格上需要有任何可見的東西才能使任何區別。
>11。字體風格的屬性接受“斜”
的值 幾乎每次您看到字體式屬性時，它都以“正常”或“斜體”的值使用。但是您也可以給它一個“斜”的值：>但這到底是什麼意思？為什麼看起來和斜體相同？
>
規格解釋了值“傾斜”的值…“……選擇一種標記為斜面的字體，如果不是斜面的臉部或斜體。”
規格中“斜體”的描述基本上是相同的。 “斜”一詞是一個印刷術語，基本上代表傾斜的文本，但不是真正的斜體。
由於CSS處理傾斜文本的方式，它與斜體可互換，除非（如規格所述）所使用的字體的面部被識別為斜的。>我從未聽說過實際上有斜面的字體，但也許我錯了。從我所做的研究來看，字體似乎是錯誤的，可以提供斜體和傾斜面孔，因為斜面應該是沒有真正斜體的字體上的斜體版本。
>
因此，如果我沒記錯的話，這意味著如果字體沒有真正的斜體面孔，將CSS設置為字體式：斜體實際上將顯示為字體風格：斜面。12。 Word-brap與Overflow-wrap
相同>包裝屬性的屬性不經常使用，但在特定情況下非常有用。一個經常使用的例子是幫助長期不間斷的文本（如URL）包裹，而不是脫離容器。這是一個示例：
請參閱codepen上的sitepoint（@sitepoint）的筆詞包裝演示。
>儘管跨瀏覽器，並且從我看來，W3C決定用溢出包裝替換Word-wrap - 我猜是因為以前的名字被認為是錯誤的名稱。溢出包裝具有與word-nap相同的值，而Word-brap現在被視為“溢出” - wrap的“替代語法”。
>>雖然一些新的瀏覽器確實支持溢出包裝，但由於舊瀏覽器的處理方式恰到好處，因此打擾它似乎毫無意義，並且所有瀏覽器都必須繼續無限期地支持Word-wrap，出於遺產。
>當所有使用瀏覽器自動更新時，我們可以開始使用溢出包裝 - 但是在那之前，我看不到從舊語法更改的點。其中有多少個對您來說是新的？
>>很有趣的是，看到其中有多少個對我們的讀者來說是新的。在下面發表評論，告訴我們有多少是您新的（例如6/12、4/12或其他）。
> 以可學習的會員資格拾取更多的CSS提示和提示。您將可以訪問數十個書籍和課程，包括的暢銷書，開始css ，> CSS Anthology等。 經常詢問有關CSS 的問題（常見問題解答）
> CSS的某些獨特屬性是什麼不知所周的？ CSS或級聯樣式表具有幾種眾所周知的獨特屬性。例如，CSS擁有一個稱為“計算”的屬性，該屬性允許您執行計算以確定CSS屬性值。這對於響應式設計可能非常有用。另一個鮮為人知的屬性是“ CH”，它代表角色，可用於設置與使用字體的“ 0”特徵的寬度有關的寬度和其他測量值。>
中，“ z index”屬性的目的是什麼，CSS中的“ z index'屬性用於控制元素的堆疊順序。具有較高“ Z index”值的元素將出現在“ z索引”值較低的元素的頂部。當處理重疊的元素時，例如在復雜的佈局或創建模式或下拉菜單時，這可能特別有用。
可以使用CSS來創建梯度嗎？> CSS中的“偽元素”是什麼？
>> 在CSS中使用“偽元素”用於樣式元素的特定部分。例如，使用“ ::”和“ ::”偽元素用於插入元素內容之前或之後的內容。這對於在網站上添加裝飾功能可能很有用。
以上是12個鮮為人知的CSS事實的詳細內容。更多資訊請關注PHP中文網其他相關文章！
