大家好！今天我們要 討論 CSS 中的一些有用的技巧 。開始吧……
目前，Firefox 和 Safari 開始支持混合模式，就像 Photoshop 一樣。Chrome 和 Opera 也支持，只是有些差異。看例子：
你可以創建不同的樣式。下面是示例代碼：
.blend { background: #fff;}.blend img { mix-blend-mode: darken; }在線嘗試一下 CSS 混合模式和濾鏡 ！
如今，你可以在邊框里使用漸變了。非常簡單，只要用較小的 z-index 設置偽元素就可以了：
.box { margin: 80px 30px; width: 200px; height: 200px; position: relative; background: #fff; float: left;}.box:before { content: ''; z-index: -1; position: absolute; width: 220px; height: 220px; top: -10px; left: -10px; background-image: linear-gradient(90deg, yellow, gold);}你可以在 這里 找到所有例子。使用 background-clip 和 background-origin 也可以做到 。在美好未來的某一天，border-image 屬性也會被所有瀏覽器支持，實現方法如下：
.box { border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); border-image-slice: 1; /* set internal offset */}你可能不知道，但是 z-index 的確支持過渡了！它不會在每一步去改變值，因此你會認為，它不會產生過渡。但是，它真的支持！這里有個 不錯的例子 。
我們可以用它檢測當前顏色值，這樣我們就不必多次定義它。
當和 SVG icon 一起使用時最有幫助，它隨著父級元素顏色的改變而改變。通常，我們的做法如下：
.button { color: black;}.button:hover { color: red;}.button:active { color: green;}.button svg { fill: black;}.button:hover svg { fill: red;}.button:active svg { fill: green;}不過，我們可以用 currentColor 實現：
svg { fill: currentColor;}.button { color: black; border: 1px solid currentColor;}.button:hover { color: red;}.button:active { color: green;}關于偽元素的代碼：
a { color: #000;}a:hover { color: #333;}a:active { color: #666;}a:after, a:hover:after, a:active:after { background: currentColor; ...}你還記得有時候你需要為圖片設置 background-size 嗎，因為它會解決很多問題。現在你可以使用 object-fit，webkit 支持它，很快也會被 Firefox 支持。
.image__contain { object-fit: contain; } .image__fill { object-fit: fill; }.image__cover { object-fit: cover; }.image__scale-down { object-fit: scale-down;}示例 。
我們不使用任何圖片，來給某個復選按鈕設置樣式：
input[type=checkbox] {display: none;}input[type=checkbox] + label:before { content: ""; border: 1px solid #000; font-size: 11px; line-height: 10px; margin: 0 5px 0 0; height: 10px; width: 10px; text-align: center; vertical-align: middle;}input[type=checkbox]:checked + label:before { content: "\2713";}你可以看到，偽元素和偽選擇器 :checked（IE9+）表現正常。在上面的示例代碼中，我們隱藏了原始的復選按鈕，用我們自己的代替。當被勾選時，我們通過 content 顯示一個 Unicode 字符。
CSS 和 HTML 用到的 Unicode 字符不同。在 CSS 中，開頭是反斜杠，然后跟上十六進制的字符，而在 HTML 中，它是十進制的，形如 ✓ 。
我們還可以給復選按鈕加上動畫：
input[type=checkbox] + label:before { content: "\2713"; color: transparent; transition: color ease .3s;}input[type=checkbox]:checked + label:before { color: #000;}下面是單選按鈕的動畫：
input[type=radio] + label:before { content: "\26AB"; border: 1px solid #000; border-radius: 50%; font-size: 0; transition: font-size ease .3s;}input[type=radio]:checked + label:before { font-size: 10px; }你可以在 這里 找到完整的 Unicode 清單，試著 鼓搗下代碼 吧。
不是每個人都知道 counter 可以在 CSS 中設置：
- a
- b
- c
.list { counter-reset: i; //reset conunter}.list > li { counter-increment: i; //counter ID}.list li:after { content: "[" counter(i) "]"; //print the result}我們在 counter-reset 屬性中定義了一個任意 ID 和初始值（默認為 0）。你可以在 counter-increment 中設置另一個數字，它定義了計數器的步長。
比如，counter-increment: i 2 將只顯示偶數。
你還可以累加被用戶選中的復選按鈕：
Total selected:
.languages { counter-reset: characters;}input:checked { counter-increment: characters;}.total:after { content: counter(characters);}我們累加 input:checked 的值，并顯示出來， 參看例子 。
你還能開發出一個小型計算器呢：
Sum
.numbers { counter-reset: sum;}#one:checked { counter-increment: sum 1; }#two:checked { counter-increment: sum 2; }#three:checked { counter-increment: sum 3; }#four:checked { counter-increment: sum 4; }#five:checked { counter-increment: sum 5; }#one-hundred:checked { counter-increment: sum 100; }.sum::after { content: '= ' counter(sum);}運行原理一樣。這里有在線 demo 和 文章 。
你還記得需要使用「三明治」圖標的頻率嗎？
至少有 3 種方法來繪制：
.shadow-icon { position: relative; } .shadow-icon:after { content: ""; position: absolute; left: 0; top: -50px; height: 100%; width: 100%; box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000; }.gradient-icon { background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);}你可以只粘貼這個標準符號：? （Unicode: U+2630, HTML: ☰）。你可以調整其顏色或尺寸，因此它沒有其它方法靈活。
看例子 。
你還可以使用帶有偽元素的 SVG、圖標字體或邊框。
CSS 有一些稱之為 supports 的新表達式。如你所見，它可以檢測瀏覽器是否支持所需選項。不是所有瀏覽器都支持它，但是你可將其用作簡單的檢查。
@supports (display: flex) { div { display: flex; }}/*You can check prefixes*/@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; float: none; }}把 visibility: visible 的區塊設置為 visibility: hidden，你對此有何看法？
.hidden { visibility: hidden;}.hidden .visible { visibility: visible;}你或許認為所有元素都將被隱藏，實際上，除了子元素顯示之外，父元素將隱藏所有元素。請看 demo 。
我們已經發現了一個新特性，現在你可以創建 “sticky” 的區塊了。它們和 fixed 區塊表現一樣，但是不會隱藏另一個區塊。 你最好看下這里 。目前，只有 Mozilla 和 Safari 支持，但是你可以用如下方式實現：
.sticky { position: static; position: sticky; top: 0px;}我們將會在支持的瀏覽器里得到一個 sticky 區塊，而在其它瀏覽器里得到一個普通區塊。特別有利于移動網站，因為你需要創建一個可移動區塊且不影響其它元素。
最近，世界上找到了一種新方式，用來描述不同物體的尺寸。比如：
有意思的是，大部分現代瀏覽器都對它們支持很好，你可以隨意使用。我們為什么需要它們呢？因為它們讓所有的尺寸更簡單了。你不必定義父級元素尺寸的百分比或其它東東。看個例子：
.some-text { font-size: 100vh; line-height: 100vh;}或者，你在屏幕中央放置一個美麗的彈窗：
.blackSquare { background: black; position: fixed; height: 50vh; width: 50vw; left: 25vw; top: 25vh;}這貌似是很酷的解決方案。請參考來自 Codepen 的 例子 。
在使用這個特性時，存在一些劣勢：
我們用數行代碼就能改變選中文本的顏色：
*::selection { color: #fff; background: #000;}*::-moz-selection { /*Only Firefox still needs a prefix*/ color: #fff; background: #000;}除了定義選中文本的顏色，還能定義陰影和背景。
如果頁面存在一些內部滾動的區塊，那么除了添加 overflow: scroll / auto，還要添加這行代碼：
-webkit-overflow-scrolling: touch;
問題在于，移動設備瀏覽器對于 overflow: scroll 屬性支持不夠好，會滾動整個頁面而不是期望的區塊。-webkit-overflow-scrolling 修復了這個問題。你可以將其添加到你自己的項目中，看看效果。
有時候你的動畫能夠減慢用戶電腦。為了阻止這種情況，你可以針對特定區塊使用加速：
.block { transform: translatez(0);}你可能感受不到變化，但是瀏覽器理解，這個元素應該被看做三維，然后開啟加速。如果針對 will-change 屬性的具體設計，沒有提供正常支持，這種方法就不太建議了。
你可以在如下代碼看到使用 Unicode 字符做類名：
.? { ...}.? { ...}.? { ...}.★ { ...}.? { ...}只是開個玩笑。盡量不要在大項目中使用，因為不是每一臺電腦都一定支持 UTF-8。
事實上，垂直縮進是根據父元素的寬度、而非高度計算出來的。我們創建兩個區塊：
.parent { height: 400px; width: 200px;}.child { height: 50%; padding-top: 25%; padding-bottom: 25%; width: 100%;}理論上，應該根據高度來填充父元素的，不過，我們看看結果：
你應該記住，百分比是根據父元素的寬度計算出來的。
Firefox 還沒有自身方法來計算 button 的邊距。貌似奇怪，但是你可以手動添加。
還可以這樣修復：
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: none; padding:0;}不是每個人都明白，除了為任何對象定義文本顏色，還可以定義其邊框顏色：
input[type="text"] { color: red; border: 1px solid;}如果你仍然不得不支持 IE7 等類似情況，那么，你可以用一個笑臉來定義其 hack：
很酷，對吧？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.alabama37th.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
