看了CSS 負值技巧與細節的作法

　　一天在羣裏有同窗說誤打誤撞下，使用負的 outline-offset 實現了加號。嗯？好奇的我立刻也動手嘗試了下，究竟是如何使用負的 outline-offset 實現加號呢？

　　使用負值 outline-offset 實現加號

　　假設咱們有這樣一個簡單的結構：

　　<div></div>

　　複製代碼

　　div {

　　width: 200px; height: 200px;

　　outline: 20px solid #000;

　　outline-offset: 10px;

　　}

　　複製代碼

　　offset

　　修改 outline-offset 到一個合適的負值 ，那麼在恰當的時候，outline 邊框就會向內縮進爲一個加號。

　　通過一番嘗試，修改上述 div 的 outline-offset爲 -118px。

　　div {

　　width: 200px; height: 200px;

　　outline: 20px solid #000;

　　outline-offset: -118px;

　　}

　　複製代碼

　　加個動畫效果，大概是這樣：

　　offset

　　CodePen Demo -- 使用outline實現加號

　　頗有意思，我嘗試了不少不一樣的狀況，最後總結了一個簡單的規律，要使用負的 outline-offset 生成一個加號有一些簡單的限制：

　　容器得是個正方形

　　outline 邊框自己的寬度不能過小

　　outline-offset 負值 x 的取值範圍爲: -(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)

　　在這個例子後，我又想，CSS 屬性能夠取負值的地方有不少。你們最爲熟知的就是負margin，使用負的 marign，能夠用來實現相似多列等高佈局、垂直居中等等。那還有沒有其餘一些有意思的負值使用技巧呢？

　　下文就再介紹一些 CSS 負值有意思的使用場景。

　　單側投影

　　先說單側投影，關於 box-shadow，大部分時候，咱們使用它都是用來生成一個兩側的投影，或者一個四側的投影。以下：

　　image

　　OK，那若是要生成一個單側的投影呢？

　　咱們來看看 box-shadow 的用法定義：

　　{

　　box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

　　}

　　複製代碼

　　以 box-shadow: 1px 2px 3px 4px #333 爲例，4 個數值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴張半徑。

　　這裏有一個小技巧，擴張半徑能夠爲負值。

　　繼續，若是陰影的模糊半徑，與負的擴張半徑一致，那麼咱們將看不到任何陰影，由於生成的陰影將被包含在原來的元素之下，除非給它設定一個方向的偏移量。因此這個時候，咱們給定一個方向的偏移值，便可實現單側投影：

　　image

　　CodePen Demo -- css單側投影

　　使用 scale(-1) 實現翻轉

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

　　<p class="scale">CSS Nagative Scale(-1)</p>

　　複製代碼

　　.scale {

　　transform: scale(1);

　　animation: scale 10s infinite linear;

　　}

　　@keyframes scale{

　　50% {

　　transform: scale(-1);

　　}

　　100% {

　　transform: scale(-1);

　　}

　　}

　　複製代碼

　　看看效果：

　　scale-1

　　（GIF 中第一行是使用了 transform: rotate(180deg) 的效果）

　　CodePen Demo -- 使用 scale(-1) 實現元素的翻轉

　　使用負 letter-spacing 倒序排列文字

　　與上面 scale(-1) 有殊途同歸之妙的是負的 letter-spacing。

　　letter-spacing 屬性明確了文字的間距行爲，一般而言，除了關鍵字 normal，咱們還能夠指定一個大小，表示文字的間距。像這樣：

　　<p class="letter_spacing">倒序排列文字</p>

　　複製代碼

　　.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，觀察不一樣的變化：

　　letter-spacing

　　CodePen Demo -- 負letter-spacing倒序排列文字

　　然而，受到中英文混排或者不一樣字體的影響，以及倒序後的排列方式，不建議使用這種方式來倒序排列文字。

　　transition-delay 及 animation-delay 的負值使用，馬上開始動畫

　　咱們知道，CSS 動畫及過渡提供了一個 delay 屬性，能夠延遲動畫的進行。

　　考慮下面這個動畫：

　　transition-delay2

　　簡單的代碼大概是這樣：

　　<div class="g-container">

　　<div class="item"></div>

　　<div class="item"></div>

　　<div class="item"></div>

　　</div>

　　複製代碼

　　.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 爲負值的動畫會馬上執行，開始的位置是其動畫階段中的一個階段。因此，動畫在一開始的時刻就是下面這樣：

　　transition-delay

　　以上述動畫爲例，一個被定義執行 3s 的動畫，若是 animation-delay 爲 -1s，起點至關於正常執行時，第2s（3-1）時的位置。

　　CodePen Demo -- 使用負值 animation-delay 提早執行動畫

　　負值 margin

　　負值 margin 在 CSS 中算是運用的比較多的，元素的外邊距能夠設置爲負值。

　　在 flexbox 佈局規範還沒流行以前，實現多行等高佈局仍是須要下一番功夫的。其中一種方法即是使用正 padding 負 margin 相消的方法。

　　有以下一個佈局：

　　paddingmargin

　　左右兩欄的內容都是不肯定的，也就是高度未知。可是但願不管左側內容較多仍是右側內容較多，兩欄的高度始終保持一致。

　　OK，其中一種 Hack 辦法即是使用一個很大的正 padding 和相同的負 margin 相消的方法填充左右兩欄：

　　.g-left {

　　...

　　padding-bottom: 9999px;

　　margin-bottom: -9999px;

　　}

　　.g-right {

　　...

　　padding-bottom: 9999px;

　　margin-bottom: -9999px;

　　}

　　複製代碼

　　能夠作到不管左右兩欄高度如何變化，高度較低的那一欄都會隨着另一欄變化。