CSS的22個(gè)必備技巧_html/css_WEB-ITnose

本文是翻譯，版權(quán)歸原作者所有

大家好！今天我們要 討論 CSS 中的一些有用的技巧 。開(kāi)始吧……

混合模式

目前，F(xiàn)irefox 和 Safari 開(kāi)始支持混合模式，就像 Photoshop 一樣。Chrome 和 Opera 也支持，只是有些差異?？蠢樱?/p>

你可以創(chuàng)建不同的樣式。下面是示例代碼：

.blend { background: #fff;}.blend img { mix-blend-mode: darken; }

在線嘗試一下 CSS 混合模式和濾鏡 ！

漸變邊框

如今，你可以在邊框里使用漸變了。非常簡(jiǎn)單，只要用較小的 z-index 設(shè)置偽元素就可以了：

.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 也可以做到 。在美好未來(lái)的某一天，border-image 屬性也會(huì)被所有瀏覽器支持，實(shí)現(xiàn)方法如下：

.box { border-image: linear-gradient(to bottom, #000000 0%, #FFFFFF 100%); border-image-slice: 1; /* set internal offset */}

z-index 支持過(guò)渡

你可能不知道，但是 z-index 的確支持過(guò)渡了！它不會(huì)在每一步去改變值，因此你會(huì)認(rèn)為，它不會(huì)產(chǎn)生過(guò)渡。但是，它真的支持！這里有個(gè) 不錯(cuò)的例子 。

currentColor

我們可以用它檢測(cè)當(dāng)前顏色值，這樣我們就不必多次定義它。

當(dāng)和 SVG icon 一起使用時(shí)最有幫助，它隨著父級(jí)元素顏色的改變而改變。通常，我們的做法如下：

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

不過(guò)，我們可以用 currentColor 實(shí)現(xiàn)：

svg { fill: currentColor;}.button { color: black; border: 1px solid currentColor;}.button:hover { color: red;}.button:active { color: green;}

關(guān)于偽元素的代碼：

a { color: #000;}a:hover { color: #333;}a:active { color: #666;}a:after, a:hover:after, a:active:after { background: currentColor; ...}

object-fit

你還記得有時(shí)候你需要為圖片設(shè)置 background-size 嗎，因?yàn)樗鼤?huì)解決很多問(wèn)題?，F(xiàn)在你可以使用 object-fit，webkit 支持它，很快也會(huì)被 Firefox 支持。

.image__contain { object-fit: contain; } .image__fill { object-fit: fill; }.image__cover { object-fit: cover; }.image__scale-down { object-fit: scale-down;}

示例 。

單選、復(fù)選按鈕的樣式

我們不使用任何圖片，來(lái)給某個(gè)復(fù)選按鈕設(shè)置樣式：

 Checkbox

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+）表現(xiàn)正常。在上面的示例代碼中，我們隱藏了原始的復(fù)選按鈕，用我們自己的代替。當(dāng)被勾選時(shí)，我們通過(guò) content 顯示一個(gè) Unicode 字符。

CSS 和 HTML 用到的 Unicode 字符不同。在 CSS 中，開(kāi)頭是反斜杠，然后跟上十六進(jìn)制的字符，而在 HTML 中，它是十進(jìn)制的，形如 ✓ 。

我們還可以給復(fù)選按鈕加上動(dòng)畫：

input[type=checkbox] + label:before { content: "\2713"; color: transparent; transition: color ease .3s;}input[type=checkbox]:checked + label:before { color: #000;}

下面是單選按鈕的動(dòng)畫：

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 清單，試著 鼓搗下代碼 吧。

CSS 中的 counter

不是每個(gè)人都知道 counter 可以在 CSS 中設(shè)置：

 
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}

我們?cè)?counter-reset 屬性中定義了一個(gè)任意 ID 和初始值（默認(rèn)為 0）。你可以在 counter-increment 中設(shè)置另一個(gè)數(shù)字，它定義了計(jì)數(shù)器的步長(zhǎng)。

比如，counter-increment: i 2 將只顯示偶數(shù)。

CSS 高級(jí)計(jì)數(shù)器

你還可以累加被用戶選中的復(fù)選按鈕：

 C C++ C# Java JavaScript PHP Python Ruby 
 Total selected:

.languages { counter-reset: characters;}input:checked { counter-increment: characters;}.total:after { content: counter(characters);}

我們累加 input:checked 的值，并顯示出來(lái)， 參看例子 。

你還能開(kāi)發(fā)出一個(gè)小型計(jì)算器呢：

 1 2 3 4 5 100 
 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);}

運(yùn)行原理一樣。這里有在線 demo 和 文章 。

沒(méi)有圖片的菜單圖標(biāo)

你還記得需要使用「三明治」圖標(biāo)的頻率嗎？

至少有 3 種方法來(lái)繪制：

1.shadow

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

2.漸變

.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%);}

3.UTF-8

你可以只粘貼這個(gè)標(biāo)準(zhǔn)符號(hào)：? （Unicode: U+2630, HTML: ☰）。你可以調(diào)整其顏色或尺寸，因此它沒(méi)有其它方法靈活。

看例子 。

你還可以使用帶有偽元素的 SVG、圖標(biāo)字體或邊框。

@Supports

CSS 有一些稱之為 supports 的新表達(dá)式。如你所見(jiàn)，它可以檢測(cè)瀏覽器是否支持所需選項(xiàng)。不是所有瀏覽器都支持它，但是你可將其用作簡(jiǎn)單的檢查。

@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: visible 的區(qū)塊設(shè)置為 visibility: hidden，你對(duì)此有何看法？

.hidden { visibility: hidden;}.hidden .visible { visibility: visible;}

你或許認(rèn)為所有元素都將被隱藏，實(shí)際上，除了子元素顯示之外，父元素將隱藏所有元素。請(qǐng)看 demo 。

position: sticky

我們已經(jīng)發(fā)現(xiàn)了一個(gè)新特性，現(xiàn)在你可以創(chuàng)建 “sticky” 的區(qū)塊了。它們和 fixed 區(qū)塊表現(xiàn)一樣，但是不會(huì)隱藏另一個(gè)區(qū)塊。 你最好看下這里 。目前，只有 Mozilla 和 Safari 支持，但是你可以用如下方式實(shí)現(xiàn)：

.sticky { position: static; position: sticky; top: 0px;}

我們將會(huì)在支持的瀏覽器里得到一個(gè) sticky 區(qū)塊，而在其它瀏覽器里得到一個(gè)普通區(qū)塊。特別有利于移動(dòng)網(wǎng)站，因?yàn)槟阈枰獎(jiǎng)?chuàng)建一個(gè)可移動(dòng)區(qū)塊且不影響其它元素。

新尺寸

最近，世界上找到了一種新方式，用來(lái)描述不同物體的尺寸。比如：

有意思的是，大部分現(xiàn)代瀏覽器都對(duì)它們支持很好，你可以隨意使用。我們?yōu)槭裁葱枰鼈兡?？因?yàn)樗鼈冏屗械某叽绺?jiǎn)單了。你不必定義父級(jí)元素尺寸的百分比或其它東東?？磦€(gè)例子：

.some-text { font-size: 100vh; line-height: 100vh;}

或者，你在屏幕中央放置一個(gè)美麗的彈窗：

.blackSquare { background: black; position: fixed; height: 50vh; width: 50vw; left: 25vw; top: 25vh;}

這貌似是很酷的解決方案。請(qǐng)參考來(lái)自 Codepen 的 例子 。

在使用這個(gè)特性時(shí)，存在一些劣勢(shì)：

文本修飾

我們用數(shù)行代碼就能改變選中文本的顏色：

*::selection { color: #fff; background: #000;}*::-moz-selection { /*Only Firefox still needs a prefix*/ color: #fff; background: #000;}

除了定義選中文本的顏色，還能定義陰影和背景。

觸摸設(shè)備上的塊滾動(dòng)

如果頁(yè)面存在一些內(nèi)部滾動(dòng)的區(qū)塊，那么除了添加 overflow: scroll / auto，還要添加這行代碼：

-webkit-overflow-scrolling: touch;

問(wèn)題在于，移動(dòng)設(shè)備瀏覽器對(duì)于 overflow: scroll 屬性支持不夠好，會(huì)滾動(dòng)整個(gè)頁(yè)面而不是期望的區(qū)塊。-webkit-overflow-scrolling 修復(fù)了這個(gè)問(wèn)題。你可以將其添加到你自己的項(xiàng)目中，看看效果。

使用硬件加速

有時(shí)候你的動(dòng)畫能夠減慢用戶電腦。為了阻止這種情況，你可以針對(duì)特定區(qū)塊使用加速：

.block { transform: translatez(0);}

你可能感受不到變化，但是瀏覽器理解，這個(gè)元素應(yīng)該被看做三維，然后開(kāi)啟加速。如果針對(duì) will-change 屬性的具體設(shè)計(jì)，沒(méi)有提供正常支持，這種方法就不太建議了。

類命名用 Unicode 字符

你可以在如下代碼看到使用 Unicode 字符做類名：

.? { ...}.? { ...}.? { ...}.★ { ...}.? { ...}

只是開(kāi)個(gè)玩笑。盡量不要在大項(xiàng)目中使用，因?yàn)椴皇敲恳慌_(tái)電腦都一定支持 UTF-8。

百分比表示的垂直邊距

事實(shí)上，垂直縮進(jìn)是根據(jù)父元素的寬度、而非高度計(jì)算出來(lái)的。我們創(chuàng)建兩個(gè)區(qū)塊：

.parent { height: 400px; width: 200px;}.child { height: 50%; padding-top: 25%; padding-bottom: 25%; width: 100%;}

理論上，應(yīng)該根據(jù)高度來(lái)填充父元素的，不過(guò)，我們看看結(jié)果：

你應(yīng)該記住，百分比是根據(jù)父元素的寬度計(jì)算出來(lái)的。

Firefox 下的 button 邊距

Firefox 還沒(méi)有自身方法來(lái)計(jì)算 button 的邊距。貌似奇怪，但是你可以手動(dòng)添加。

還可以這樣修復(fù)：

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

Color + Border = Border-Color

不是每個(gè)人都明白，除了為任何對(duì)象定義文本顏色，還可以定義其邊框顏色：

input[type="text"] { color: red; border: 1px solid;}

流金歲月

如果你仍然不得不支持 IE7 等類似情況，那么，你可以用一個(gè)笑臉來(lái)定義其 hack：

很酷，對(duì)吧？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com