CSS-冷門技巧分享

CSS-冷門技巧分享

（一）如何實現一個加號？

以前我在看別人關於css的文章中提到了使用負的 outline-offset 實現了加號，所以研究了一下。
咱們通常實現加號的方式，就是直接使用字符：+，是否是很是方便？可是存在一個問題，咱們看下面的例子，你們思考一下怎麼實現：

請實現一個50像素x50像素的加號+（不用圖片）【點擊】

是否是咱們將font-size屬性設置爲50px就能夠實現呢？

文字大小50px：+

能夠看出明顯不行，我將這個容器的高度設置爲了50像素，可是加號的大小明顯更小，並且在不設置line-height屬性的狀況下，還會不上下居中，而且粗細不可控，若是設置line-height呢：

文字大小50px：+

位置仍然是偏下的。

那若是咱們將font-size屬性設置更大一些，100像素？

文字大小100px：+

此時的加號，我經過工具測量出的大小是51px，這說明，想用font-size屬性實現固定大小的加號，不是最優選，這種方式很難控制實現的加號大小跟位置。

用 outline(輪廓) 和負的 outline-offset(輪廓偏移) 實現一個50像素x50像素的加號+：

一個完美的50像素x50像素加號：

 

實現很是簡單，首先肯定寬高，設置outline屬性爲1/2寬高 + 1（加號的粗細），outline-offset爲寬高值的負數便可。

上面咱們提到，直接用文字時沒法控制咱們想要的加號粗細、垂直居中效果，可是outline屬性也能夠輕鬆解決，增長或減少outline值：

 

此方式實現+號，還能夠進行擴展，以往開發中遇到的關閉按鈕，以及新增按鈕，能夠不用切圖，直接用樣式實現：

1

2

3

在實際使用中，chrome火狐支持比較良好，IOS反而不支持這種作法，使用須要注意

（二）單側投影

box-shadow，是經常使用來實現盒子投影的屬性，咱們一般來作兩側投影&多邊投影，但其實，負數值能夠實現單側投影。

2側

4側

1側

box-shadow屬性4個數值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴張半徑，單側投影的原理就是若是陰影的模糊半徑，與負的擴張半徑一致，那麼咱們將看不到任何陰影，由於生成的陰影將被包含在原來的元素之下，除非給它設定一個方向的偏移量，簡單理解就是，前兩個數值控制陰影中心，最後一個數值控制陰影大小。

（三）翻轉

咱們要實現一個元素的 180° 翻轉，咱們會使用 transform: rotate(180deg)，這裏有個小技巧，使用 transform: scale(-1) 能夠達到一樣的效果。

transform: rotate(180deg)翻轉

transform: scale(-1) 翻轉

（四）文字倒序

負的 letter-spacing 能夠實現一段文字倒序排列，這種技巧實際使用不多。

漢字的順序不影響閱讀

（五）實現等高佈局

flexbox 佈局是目前實現等高佈局最主流的方法，不過 padding + margin 的結合，也能夠實現。

這是兩個普通非等高佈局

左盒子
左盒子
左盒子
左盒子

右盒子

padding + margin 結合實現等高佈局，原理實際上是使用一個很大的正 padding 和相同的負 margin 相消的方法填充左右兩欄

左盒子
左盒子
左盒子
左盒子

右盒子

（六）去除多餘邊距&border

咱們在開發時常常遇到這樣的樣式處理：每一個列表之間設置必定的間距（margin-right），這樣是爲了多個元素並排展現時，中間留有空隙，此時在父容器定寬的狀況下，元素會錯位，好比：

 

這就出現了一個問題，右側跟底部的邊距，是不但願展現出來的，這時候咱們一般的處理方法是，單行展現：用last-child選擇器，多行展現，用:nth-child(3n+0)：

 

 

last-child

 

 

nth-child(3n+0)

 

 

nth-child(3n+0)

上面的選擇器解決了右側邊距的問題，可是沒有解決底部的問題，其實最簡單的技巧就是，增長一層包裹的父節點，並設置其負margin，並設置 overflow: hidden：

1

2

3

4

5

6

參考及擴展：

1-負值之美：負margin在頁面佈局中的應用

2-使用css outline-offset 屬性 實現加號

3-純CSS製做各類各樣的網頁圖標（三角形、暫停按鈕、下載箭頭、加號等）

4-第五屆CSS大會主題分享之CSS創意與視覺表現