大家好，今天我們將會介紹一些非常實用的CSS小技巧，讓我們開始吧！
混合模式
之前Firefox和Safari瀏覽器已經開始支持類似Photoshop的混合模式，但是在Chrome和Opera瀏覽器中需要添加前綴。舉個栗子：
1//?你也可以嘗試不同的樣式
2
3.blend?{
4background:?#fff;
5}
6.blend?img?{
7mix-blend-mode:?darken;
8}
體驗地址：http://ilyashubin.github.io/FilterBlend/
漸變邊框
現在，你甚至可以在邊框中使用漸變。 要使用漸變邊框非常簡單，只需要設置一個更低z-index的偽元素即可：
1.box?{
2margin:80px30px;
3width:200px;
4height:200px;
5position:?relative;
6background:?#fff;
7float:?left;
8}
9.box:before?{
10content:'';
11z-index:-1;
12position:?absolute;
13width:220px;
14height:220px;
15top:-10px;
16left:-10px;
17background-image:?linear-gradient(90deg,?yellow,?gold);
18}
具體的例子可以看這里（https://jsfiddle.net/4qypuono/），或者看這里（https://codepen.io/anon/pen/jEOGJe）使用的是background-clip和background-origin屬性。
在不久的將來，也許所有瀏覽器都將支持border-image屬性，最終的代碼會和下面一樣：
1.box?{
2border-image:?linear-gradient(to?bottom,?#0000000%,?#FFFFFF100%);
3border-image-slice:1;/*?set?internal?offset?*/
4}
z-index的過渡
也許你不知道z-index同樣支持過渡！在過渡的每一步中，它的值都不發生改變，所以你以為它不支持過渡——但其實它支持。
舉個栗子→（http://zomigi.com/demo/z-index_transition.html）
currentColor
我們可以使用這個方法來偵測當前的顏色，以避免經常地重復定義它。
順便給大家推薦一個裙，它的前面是 537，中間是631，最后就是 707。想要學習前端的小伙伴可以加入我們一起學習，互相幫助。群里每天晚上都有大神免費直播上課，如果不是想學習的小伙伴就不要加啦。
?這個方法在使用SVG圖標的時候非常有用，因為它們的顏色由其父元素決定。通常我們是這么做的：
1.button?{
2color:?black;
3}
4.button:hover?{
5color:?red;
6}
7.button:active?{
8color:?green;
9}
10
11.button?svg?{
12fill:?black;
13}
14.button:hover?svg?{
15fill:?red;
16}
17.button:active?svg?{
18fill:?green;
19}
但我們可以使用currentColor這么做：
1svg?{
2fill:?currentColor;
3}
4
5.button?{
6color:?black;
7border:1px?solid?currentColor;
8}
9.button:hover?{
10color:?red;
11}
12.button:active?{
13color:?green;
14}
附上其它帶有偽元素的例子：
1a?{
2color:?#000;
3}
4a:hover?{
5color:?#333;
6}
7a:active?{
8color:?#666;
9}
10
11a:after,
12a:hover:after,
13a:active:after?{
14background:?currentColor;
15...
16}
Object Fit
你是否還記得為了解決一些問題而給一幅背景圖設置background-size屬性的時刻呢？
現在你可以使用object-fit屬性啦，webkit瀏覽器都支持它，Firefox也將在近期予以支持。
1.image__contain?{
2object-fit:?contain;
3}
4.image__fill?{
5object-fit:?fill;
6}
7.image__cover?{
8object-fit:?cover;
9}
10.image__scale-down?{
11object-fit:?scale-down;
12}
舉個栗子→（https://codepen.io/CSSKing/pen/XJEZeG）
單選框和復選框的樣式
讓我們一起不使用圖片來設置復選框的樣式：
1
2
3Checkbox
1
2input[type=checkbox]?{display:?none;}
3
4input[type=checkbox]?+?label:before?{
5content:"";
6border:1px?solid?#000;
7font-size:11px;
8line-height:10px;
9margin:05px00;
10height:10px;
11width:10px;
12text-align:?center;
13vertical-align:?middle;
14}
15
16input[type=checkbox]:checked?+?label:before?{
17content:"\2713";
18}
正如你所看見的，我們隱藏了原有的復選框，改為使用偽元素和偽類:checked（IE9+）來表現它。
當它被選中時，一個設置在content里的Unicode編碼的字符將會顯示出來。
值得注意的是，Unicode編碼在CSS和HTML中的寫法是不一樣的。在CSS中它是一個以反斜杠為開始的十六進制數，而在HTML中它是十進制的，比如✓。 接著為我們的復選框添加一些動畫效果：
1
2input[type=checkbox]?+?label:before?{
3content:"\2713";
4color:?transparent;
5transition:?color?ease.3s;
6}
7input[type=checkbox]:checked?+?label:before?{
8color:?#000;
9}
10
11
12input[type=radio]?+?label:before?{
13content:"\26AB";
14border:1px?solid?#000;
15border-radius:50%;
16font-size:0;
17transition:?font-size?ease.3s;
18}
19input[type=radio]:checked?+?label:before?{
20font-size:10px;
21}
這里（https://unicode-table.com/en/）是所有的Unicode編碼，以及可以在這里（https://codepen.io/anon/pen/CdzwB）進行體驗。
CSS中的計數器
總所周知CSS中是可以使用計數器的：
1
2
3
4
5
6
1
2.list?{
3counter-reset:?i;//reset?conunter
4}
5.list?>?li?{
6counter-increment:?i;//counter?ID
7}
8.list?li:after?{
9content:"["counter(i)"]";//print?the?result
10}
我們定義了一個ID在counter-reset屬性中作為初始值（默認為0）。你可以設置另一個值在counter-increment屬性中作為每一步的遞增值。
順便給大家推薦一個裙，它的前面是 537，中間是631，最后就是 707。想要學習前端的小伙伴可以加入我們一起學習，互相幫助。群里每天晚上都有大神免費直播上課，如果不是想學習的小伙伴就不要加啦。
高級CSS計數器
你可以計算出有多少個復選框被用戶勾選了：
1
2
3C
4C++
5C#
6Java
7JavaScript
8PHP
9Python
10Ruby
11
12
13Total?selected:
14
1
2.languages?{
3counter-reset:?characters;
4}
5input:checked?{
6counter-increment:?characters;
7}
8.total:after?{
9content:?counter(characters);
10}
你也可以制作一個簡單的計算器：
1
2
31
42
53
64
75
8100
9
10
11Sum
12
1
2.numbers?{
3counter-reset:?sum;
4}
5
6#one:checked?{?counter-increment:?sum1;?}
7#two:checked?{?counter-increment:?sum2;?}
8#three:checked?{?counter-increment:?sum3;?}
9#four:checked?{?counter-increment:?sum4;?}
10#five:checked?{?counter-increment:?sum5;?}
11#one-hundred:checked?{?counter-increment:?sum100;?}
12
13.sum::after?{
14content:'=?'counter(sum);
15}
它同樣得以運行，請看具體的DEMO（https://codepen.io/CSSKing/pen/vEeMey）和文章（https://codersblock.com/blog/fun-times-with-css-counters/）。
不使用圖片的菜單圖標
你記得你有多么經常被迫需要一個“漢堡”圖標嗎？
這里有至少3個方式去實現它：
1、 Shadows
1.shadow-icon?{
2position:?relative;
3}
4.shadow-icon:after?{
5content:"";
6position:?absolute;
7left:0;
8top:-50px;
9height:100%;
10width:100%;
11box-shadow:05px0#000,015px0#fff,025px0#000,035px0#fff,045px0#000;
12}
2、 Gradient
1.gradient-icon?{
2background:?linear-gradient(to?bottom,?#0000%,?#00020%,?transparent20%,?transparent40%,?#00040%,?#00060%,?transparent60%,?transparent80%,?#00080%,?#000100%);
3}
3、 UTF-8 你可以直接使用標準符號：? (Unicode: U+2630, HTML: ?)。你也可以像其他元素那樣靈活設置它的顏色或大小。
順便給大家推薦一個裙，它的前面是 537，中間是631，最后就是 707。想要學習前端的小伙伴可以加入我們一起學習，互相幫助。群里每天晚上都有大神免費直播上課，如果不是想學習的小伙伴就不要加啦。
?你也可以使用SVG，字體圖標，或者通過偽元素設置的border邊框。
@Supports
這是一個新的叫做supports的CSS表達式。顧名思義，它可以檢測某些設定是否被瀏覽器所支持，并非所有的瀏覽器都支持它，但是你仍然可以使用它作為基本的檢測手段：
1@supports?(display:?flex)?{
2div?{display:?flex;?}
3}
4
5/*You?can?check?prefixes*/
6@supports?(display:?-webkit-flex)?or?(display:?-moz-flex)?or?(display:?flex)?{
7section?{
8display:?-webkit-flex;
9display:?-moz-flex;
10display:?flex;
11float:?none;
12}
13}
visibility: visible
在你看來，把一個設置為visibility: visible的元素放在一個設置為visibility: hidden的元素里面，會發生什么？
1.hidden?{
2visibility:?hidden;
3}
4.hidden?.visible?{
5visibility:?visible;
6}
你可能會認為兩個元素都不顯示——然而事實上整個父元素都被隱藏了，而子元素不會。請看DEMO（https://codepen.io/CSSKing/pen/lxBfk）。
position: sticky
我們發現了一個新的特性，你可以新建一個sticky屬性的元素。它的運行效果和fixed相同，但不會擋住任何元素。你最好看看例子?只有Mozilla和Safari瀏覽器支持這一屬性，但你也可以像下面那樣使用它：
1.sticky?{
2position:static;
3position:?sticky;
4top:0px;
5}
我們將會在支持的瀏覽器中得到一個sticky屬性的元素，而在不支持的瀏覽器中它將會是一個普通的元素。這在你需要建立一個不可替代的，可以移動的元素的移動端頁面的時候非常實用。
新的尺寸單位
不久之前，一些新的用以描述不同元素大小的尺寸單位問世了，它們是：
vw (viewport width) - 瀏覽器窗口寬度的1%。
vh (viewport height) - 同上，只不過用來描述高度。
vmin and vmax 設置介于vh和vw之間的最大最小值。
有趣的是，幾乎所有的現代瀏覽器都能很好地支持它們，所以你可以放心地使用。 為什么我們需要這些新的單位？因為它們可以讓不同的尺寸更容易被定義，你不要為父元素指定任何的百分比或者別的什么，請看例子：
1.some-text?{
2font-size:100vh;
3line-height:100vh;
4}
或者你可以設置一個漂亮的彈出框在屏幕中間：
1.blackSquare?{
2background:?black;
3position:?fixed;
4height:50vh;
5width:50vw;
6left:25vw;
7top:25vh;
8}
這看起來酷斃了，看看在codepen的例子（https://codepen.io/CrocoDillon/pen/fBJxu）
?但是目前仍然有一些關于這些新單位的不足之處：
IE9應該用vm而不是vmin。
iOS7在使用vh的時候可能會有bug。
vmax至今并未得到全面的支持。
文字修飾
我們可以通過幾行代碼修改文字被選中時的效果：
1*::selection?{
2color:?#fff;
3background:?#000;
4}
5*::-moz-selection?{
6/*Only?Firefox?still?needs?a?prefix*/
7color:?#fff;
8background:?#000;
9}
你不僅可以定義文字被選中時的顏色，還能定義陰影或者背景顏色。
順便給大家推薦一個裙，它的前面是 537，中間是631，最后就是 707。想要學習前端的小伙伴可以加入我們一起學習，互相幫助。群里每天晚上都有大神免費直播上課，如果不是想學習的小伙伴就不要加啦。
觸摸屏當中的元素滾動
如果你需要在觸摸屏當中為一些元素設置內滾動，那么你不僅需要overflow: scroll / auto，還需要-webkit-overflow-scrolling: touch;實際上，移動端瀏覽器在某些時候并不能正確執行overflow: scroll / auto，它可能會滾動整個頁面而不是你想要的那部分。-webkit-overflow-scrolling解決了這個問題，你可以在你的實際項目中體驗一下。
使用硬件加速
有時候動畫可能會導致用戶的電腦卡頓，你可以在特定元素中使用硬件加速來避免這個問題：
1.block?{
2transform:?translateZ(0);
3}
你并不會察覺有什么不同，但瀏覽器會為這個元素進行3D硬件加速，在will-change這個特殊屬性未被全面支持之前，這個方法還是很有用的。
Unicode Classes
你可以用Unicode符號明名class：
1.??{
2...
3}
4.??{
5...
6}
7.??{
8...
9}
10.★?{
11...
12}
13.??{
14...
15}
但這其實是用來搞笑的，千萬不要在大型項目中使用，因為不是所有的電腦都支持Unicode符號。
垂直方向的百分比邊距
實際上垂直方向的排列計算是基于父元素的寬度而不是高度。定義兩個元素：
1
2
3
4
5
1
2
3.parent?{
4height:400px;
5width:200px;
6}
7.child?{
8height:50%;
9padding-top:25%;
10padding-bottom:25%;
11width:100%;
12}
理論上，子元素的高會是父元素高的一半，但是看看我們實際得到的情況：
記住，子元素的百分比是相對于父元素的寬度。
火狐瀏覽器的按鈕邊距
Firefox用它自己的方式去計算按鈕的邊距。這聽起來有點奇怪，但它會自動地添加一些邊距進去：
可以用以下方法來修復這個問題：
1button::-moz-focus-inner,
2input[type="reset"]::-moz-focus-inner,
3input[type="button"]::-moz-focus-inner,
4input[type="submit"]::-moz-focus-inner?{
5border:?none;
6padding:0;
7}
Color + Border =Border-Color
很少人知道，定義了一個元素的文字顏色，意味著這個元素的邊框顏色也被定義了：
1input[type="text"]?{
2color:?red;
3border:1px?solid;
4}
古老瀏覽器的彩蛋
如果你仍需要適配IE7或者類似的古老瀏覽器，你可以在定義hack的時候使用笑臉符號，像這樣：
1body?{
2:)?background:?pink;
3}
是不是很有趣？
以上就是你所必備的22個CSS小技巧，感謝閱讀。
