來源?| https://juejin.im/post/6844903908440014861寫本文的起因是，一天在群里有同學說誤打誤撞下，使用負的 outline-offset 實現(xiàn)了加號。嗯？好奇的我馬上也動手嘗試了下，到底是如何使用負的 outline-offset 實現(xiàn)加號呢？使用負值 outline-offset 實現(xiàn)加號
假設我們有這樣一個簡單的結(jié)構(gòu)：div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: 10px;}
修改 outline-offset 到一個合適的負值 ，那么在恰當?shù)臅r候，outline 邊框就會向內(nèi)縮進為一個加號。經(jīng)過一番嘗試，修改上述 div 的 outline-offset為 -118px。div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: -118px;}
CodePen Demo -- 使用outline實現(xiàn)加號很有意思，我嘗試了很多不同的情況，最后總結(jié)了一個簡單的規(guī)律，要使用負的 outline-offset 生成一個加號有一些簡單的限制：- outline-offset 負值 x 的取值范圍為:
-(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)
在這個例子后，我又想，CSS 屬性可以取負值的地方有很多。大家最為熟知的就是負margin，使用負的 marign，可以用來實現(xiàn)類似多列等高布局、垂直居中等等。那還有沒有其他一些有意思的負值使用技巧呢？單側(cè)投影
先說單側(cè)投影，關于 box-shadow，大部分時候，我們使用它都是用來生成一個兩側(cè)的投影，或者一個四側(cè)的投影。如下：{ box-shadow: none | [inset? && [ ? ? ? ] ]#}
以 box-shadow: 1px 2px 3px 4px #333 為例，4 個數(shù)值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴張半徑。繼續(xù)，如果陰影的模糊半徑，與負的擴張半徑一致，那么我們將看不到任何陰影，因為生成的陰影將被包含在原來的元素之下，除非給它設定一個方向的偏移量。所以這個時候，我們給定一個方向的偏移值，即可實現(xiàn)單側(cè)投影：CodePen Demo -- css單側(cè)投影使用 scale(-1) 實現(xiàn)翻轉(zhuǎn)
通常，我們要實現(xiàn)一個元素的 180° 翻轉(zhuǎn)，我們會使用 transform: rotate(180deg)，這里有個小技巧，使用 transform: scale(-1) 可以達到同樣的效果。看個 Demo：.scale { transform: scale(1); animation: scale 10s infinite linear;}
@keyframes scale{ 50% { transform: scale(-1); } 100% { transform: scale(-1); }}
（GIF 中第一行是使用了 transform: rotate(180deg) 的效果）CodePen Demo -- 使用 scale(-1) 實現(xiàn)元素的翻轉(zhuǎn)使用負 letter-spacing 倒序排列文字
與上面 scale(-1) 有異曲同工之妙的是負的 letter-spacing。letter-spacing 屬性明確了文字的間距行為，通常而言，除了關鍵字 normal，我們還可以指定一個大小，表示文字的間距。像這樣：.letter_spacing { font-size: 36px; letter-spacing: 0px; animation: move 10s infinite;}
@keyframes move { 40% { letter-spacing: 36px; } 80% { letter-spacing: -72px; } 100% { letter-spacing: -72px; }}
我們設置文字的 letter-spacing 從 0 -> 36px -> -72px，觀察不同的變化：
CodePen Demo -- 負letter-spacing倒序排列文字然而，受到中英文混排或者不同字體的影響，以及倒序后的排列方式，不建議使用這種方式來倒序排列文字。transition-delay 及 animation-delay 的負值使用，立刻開始動畫
我們知道，CSS 動畫及過渡提供了一個 delay 屬性，可以延遲動畫的進行。
.item { transform: rotate(0) translate(-80px, 0) ;}
.item:nth-child(1) { animation: rotate 3s infinite linear;}
.item:nth-child(2) { animation: rotate 3s infinite 1s linear;}
.item:nth-child(3) { animation: rotate 3s infinite 2s linear;}
@keyframes rotate { 100% { transform: rotate(360deg) translate(-80px, 0) ; }}
如果，我們想去掉這個延遲，希望在一進入頁面的時候，3 個球就是同時運動的。這個時候，只需要把正向的 animation-delay 改成負向的即可。.item:nth-child(1) { animation: rotate 3s infinite linear;}
.item:nth-child(2) { animation: rotate 3s infinite -1s linear;}
.item:nth-child(3) { animation: rotate 3s infinite -2s linear;}
這里，有個小技巧，被設置了 animation-dealy 為負值的動畫會立刻執(zhí)行，開始的位置是其動畫階段中的一個階段。所以，動畫在一開始的時刻就是下面這樣：
以上述動畫為例，一個被定義執(zhí)行 3s 的動畫，如果 animation-delay 為 -1s，起點相當于正常執(zhí)行時，第2s（3-1）時的位置。CodePen Demo -- 使用負值 animation-delay 提前執(zhí)行動畫負值 margin
負值 margin 在 CSS 中算是運用的比較多的，元素的外邊距可以設置為負值。在 flexbox 布局規(guī)范還沒流行之前，實現(xiàn)多行等高布局還是需要下一番功夫的。其中一種方法便是使用正 padding 負 margin 相消的方法。左右兩欄的內(nèi)容都是不確定的，也就是高度未知。但是希望無論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多，兩欄的高度始終保持一致。OK，其中一種 Hack 辦法便是使用一個很大的正 padding 和相同的負 margin 相消的方法填充左右兩欄：.g-left { ... padding-bottom: 9999px; margin-bottom: -9999px;}
.g-right { ... padding-bottom: 9999px; margin-bottom: -9999px;}
可以做到無論左右兩欄高度如何變化，高度較低的那一欄都會隨著另外一欄變化。具體的代碼可以看看這里：CodePen Demo -- 正padding負margin實現(xiàn)多列等高布局總結(jié)一下
- 使用負 marign 實現(xiàn)元素的水平垂直居中
- 使用負 marign隱藏列表 li 首尾多余的邊框
- 使用負 text-indent 實現(xiàn)文字的隱藏
還有一些很深奧的，譬如張鑫旭大大在今年的 CSS 大會上分享的，利用負的 opacity 在 CSS 中實現(xiàn)了偽條件判斷，配合 CSS 自定義屬性，使用純 CSS 實現(xiàn) 360° 的餅圖效果：- 第五屆CSS大會主題分享之CSS創(chuàng)意與視覺表現(xiàn)
最后
額，雖然 CSS 負值的一些使用場景的確有有用之處，但是與此同時有可能帶來的是代碼可讀性的下降。有的時候看到這些代碼不得不好好捋一捋才能緩過神來，再感嘆一句，原來如此。如果有其他更好的更易理解的實現(xiàn)方式，具體使用實現(xiàn)的時候應該好好權(quán)衡一下。好了，本文到此結(jié)束，希望對你有幫助 :)
