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

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

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

3、移值、y方向偏移值、含糊半徑、擴(kuò)張半徑。這里有一個(gè)小技巧，擴(kuò)張半徑可以為負(fù)值。繼續(xù)，假如陰影的含糊半徑，與負(fù)的擴(kuò)張半徑全都，那么我們將看不到任何陰影，由于生成的陰影將被包含在本來的元素之下，除非給它設(shè)定一個(gè)方向的偏移量。所以這個(gè)時(shí)候，我們給定一個(gè)方向的偏移值，即可實(shí)現(xiàn)單側(cè)投影：codependemo-css單側(cè)投影用法scale(-1)實(shí)現(xiàn)翻轉(zhuǎn)通常，我們要實(shí)現(xiàn)一個(gè)元素的180°翻轉(zhuǎn)，我們會(huì)用法transform:rotate(180deg)，這里有個(gè)小技巧，用法transform:scale(-1)可以達(dá)到同樣的效果?？磦€(gè)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)實(shí)現(xiàn)元素的翻轉(zhuǎn)用法負(fù)letter-spacing倒序羅列文字與上面scale(-1)有異曲同工之妙的是負(fù)的letter-spacing。letter-spacing屬性明確了文字的間距行為，通常而言，除了關(guān)鍵字normal，我們還可

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

6、，不建議用法這種方式來倒序羅列文字。transition-delay及animation-delay的負(fù)值用法，立即開頭動(dòng)畫我們知道，css動(dòng)畫及過渡提供了一個(gè)delay屬性，可以延遲動(dòng)畫的舉行?？紤]下面這個(gè)動(dòng)畫：容易的代碼也許是這樣：.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);假如，我們想去掉這個(gè)延遲，希翼在一進(jìn)入頁面的時(shí)候，3個(gè)球就是同時(shí)運(yùn)動(dòng)的。這個(gè)時(shí)候，只需要把正向的animation-delay改成負(fù)向的即可。.item:nth-child(1)animation:rotate3sinfinitelinear;.item:nth-child(2)animation:rotate3sinfinite-1slinear;.item:nth-child(3)animation:rotate3sinfinite

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

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

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