你所不知道的 CSS 負(fù)值技巧與細(xì)節(jié)

1、你所不知道的 css 負(fù)值技巧與細(xì)節(jié)寫本文的起因是，一天在群里有學(xué)生說誤打誤撞下，用法負(fù)的outline-offset實現(xiàn)了加號。嗯？奇怪的我馬上也動手嘗試了下，到底是如何用法負(fù)的outline-offset實現(xiàn)加號呢？用法負(fù)值outline-offset實現(xiàn)加號假設(shè)我們有這樣一個容易的結(jié)構(gòu)：divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:10px;修改outline-offset到一個合適的負(fù)值，那么在恰當(dāng)?shù)臅r候，outline邊框就會向內(nèi)縮進為一個加號。經(jīng)過一番嘗試，修改上述div的outline-offset

2、為-118px。divwidth:200px;height:200px;outline:20pxsolid000;outline-offset:-118px;加個動畫效果，也許是這樣：codependemo-用法outline實現(xiàn)加號很故意思，我嘗試了無數(shù)不同的狀況，最后總結(jié)了一個容易的邏輯，要用法負(fù)的outline-offset生成一個加號有一些容易的限制：容器得是個正方形outline邊框本身的寬度不能太小outline-offset負(fù)值x的取值范圍為:-(容器寬度的一半+outline寬度的一半)?以box-shadow:1px2px3px4px333為例，4個數(shù)值的含義分離是，x方向偏

3、移值、y方向偏移值、含糊半徑、擴張半徑。這里有一個小技巧，擴張半徑可以為負(fù)值。繼續(xù)，假如陰影的含糊半徑，與負(fù)的擴張半徑全都，那么我們將看不到任何陰影，由于生成的陰影將被包含在本來的元素之下，除非給它設(shè)定一個方向的偏移量。所以這個時候，我們給定一個方向的偏移值，即可實現(xiàn)單側(cè)投影：codependemo-css單側(cè)投影用法scale(-1)實現(xiàn)翻轉(zhuǎn)通常，我們要實現(xiàn)一個元素的180°翻轉(zhuǎn)，我們會用法transform:rotate(180deg)，這里有個小技巧，用法transform:scale(-1)可以達到同樣的效果。看個demo：cssnagativescale(-1).sc

4、aletransform:scale(1);animation:scale10sinfinitelinear;keyframesscale50%transform:scale(-1);100%transform:scale(-1);看看效果：（gif中第一行是用法了transform:rotate(180deg)的效果）codependemo-用法scale(-1)實現(xiàn)元素的翻轉(zhuǎn)用法負(fù)letter-spacing倒序羅列文字與上面scale(-1)有異曲同工之妙的是負(fù)的letter-spacing。letter-spacing屬性明確了文字的間距行為，通常而言，除了關(guān)鍵字normal，我們還可

5、以指定一個大小，表示文字的間距。像這樣：倒序羅列文字.letter_spacingfont-size:36px;letter-spacing:0px;animation:move10sinfinite;keyframesmove40%letter-spacing:36px;80%letter-spacing:-72px;100%letter-spacing:-72px;我們設(shè)置文字的letter-spacing從0->36px->-72px，觀看不同的變幻：codependemo-負(fù)letter-spacing倒序羅列文字然而，受到中英文混排或者不同字體的影響，以及倒序后的羅列方式

6、，不建議用法這種方式來倒序羅列文字。transition-delay及animation-delay的負(fù)值用法，立即開頭動畫我們知道，css動畫及過渡提供了一個delay屬性，可以延遲動畫的舉行?？紤]下面這個動畫：容易的代碼也許是這樣：.itemtransform:rotate(0)translate(-80px,0);.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite1slinear;.item:nth-child(3)animation:rotate3

7、sinfinite2slinear;keyframesrotate100%transform:rotate(360deg)translate(-80px,0);假如，我們想去掉這個延遲，希翼在一進入頁面的時候，3個球就是同時運動的。這個時候，只需要把正向的animation-delay改成負(fù)向的即可。.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite-1slinear;.item:nth-child(3)animation:rotate3sinfinite

8、-2slinear;這里，有個小技巧，被設(shè)置了animation-dealy為負(fù)值的動畫會立即執(zhí)行，開頭的位置是其動畫階段中的一個階段。所以，動畫在一開頭的時刻就是下面這樣：以上述動畫為例，一個被定義執(zhí)行3s的動畫，假如animation-delay為-1s，起點相當(dāng)于正常執(zhí)行時，第2s（3-1）時的位置。codependemo-用法負(fù)值animation-delay提前執(zhí)行動畫負(fù)值margin負(fù)值margin在css中算是運用的比較多的，元素的外邊距可以設(shè)置為負(fù)值。在flexbox布局規(guī)范還沒流行之前，實現(xiàn)多行等高布局還是需要下一番功夫的。其中一種辦法便是用法正padding負(fù)margin相

9、消的辦法。有如下一個布局：左右兩欄的內(nèi)容都是不確定的，也就是高度未知。但是希翼無論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多，兩欄的高度始終保持全都。ok，其中一種hack方法便是用法一個很大的正padding和相同的負(fù)margin相消的辦法填充左右兩欄：.g-left.padding-bottom:9999px;margin-bottom:-9999px;.g-right.padding-bottom:9999px;margin-bottom:-9999px;可以做到無論左右兩欄高度如何變幻，高度較低的那一欄都會隨著另外一欄變幻。詳細(xì)的代碼可以看看這里：codependemo-正padding負(fù)margi

10、n實現(xiàn)多列等高布局總結(jié)一下另外，還有一些大家熟知的沒有單獨列出來的，譬如：用法負(fù)marign實現(xiàn)元素的水平垂直居中用法負(fù)marign躲藏列表li首尾多余的邊框用法負(fù)text-indent實現(xiàn)文字的躲藏用法負(fù)的z-index參加層疊上下文排序還有一些很淺顯的，譬如張鑫旭大大在今年的css大會上共享的，利用負(fù)的opacity在css中實現(xiàn)了偽條件推斷，協(xié)作css自定義屬性，用法純css實現(xiàn)360°的餅圖效果：第五屆css大會主題共享之css創(chuàng)意與視覺表現(xiàn)最后額，雖然css負(fù)值的一些用法場景確實有實用之處，但是與此同時有可能帶來的是代碼可讀性的下降。有的時候看到這些代碼不得不好好捋一捋才干緩過神來，再感嘆一句，本來如此。假如有其他