你可能不知道的 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)：
- <div></div>
- div {
- width: 200px; height: 200px;
- outline: 20px solid #000;
- 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為 -118px。
- div {
- width: 200px; height: 200px;
- outline: 20px solid #000;
- outline-offset: -118px;
- }
加個(gè)動(dòng)畫效果，大概是這樣：
CodePen Demo -- 使用outline實(shí)現(xiàn)加號(hào)[1]
很有意思，我嘗試了很多不同的情況，最后總結(jié)了一個(gè)簡單的規(guī)律，要使用負(fù)的 outline-offset 生成一個(gè)加號(hào)有一些簡單的限制：
- 容器得是個(gè)正方形
- outline 邊框本身的寬度不能太小
- outline-offset 負(fù)值 x 的取值范圍為: -(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)
在這個(gè)例子后，我又想，CSS 屬性可以取負(fù)值的地方有很多。大家最為熟知的就是負(fù)margin，使用負(fù)的 marign，可以用來實(shí)現(xiàn)類似多列等高布局、垂直居中等等。那還有沒有其他一些有意思的負(fù)值使用技巧呢?
下文就再介紹一些 CSS 負(fù)值有意思的使用場景。
單側(cè)投影
先說單側(cè)投影，關(guān)于 box-shadow，大部分時(shí)候，我們使用它都是用來生成一個(gè)兩側(cè)的投影，或者一個(gè)四側(cè)的投影。如下：
OK，那如果要生成一個(gè)單側(cè)的投影呢?
我們來看看 box-shadow 的用法定義：
- {
- box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
- }
以 box-shadow: 1px 2px 3px 4px #333 為例，4 個(gè)數(shù)值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴(kuò)張半徑。
這里有一個(gè)小技巧，擴(kuò)張半徑可以為負(fù)值。
繼續(xù)，如果陰影的模糊半徑，與負(fù)的擴(kuò)張半徑一致，那么我們將看不到任何陰影，因?yàn)樯傻年幱皩⒈话谠瓉淼脑刂?，除非給它設(shè)定一個(gè)方向的偏移量。所以這個(gè)時(shí)候，我們給定一個(gè)方向的偏移值，即可實(shí)現(xiàn)單側(cè)投影：
image
CodePen Demo -- css單側(cè)投影[2]
使用 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：
- <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);
- }
- }
看看效果：
(GIF 中第一行是使用了 transform: rotate(180deg) 的效果)
CodePen Demo -- 使用 scale(-1) 實(shí)現(xiàn)元素的翻轉(zhuǎn)[3]
使用負(fù) letter-spacing 倒序排列文字
與上面 scale(-1) 有異曲同工之妙的是負(fù)的 letter-spacing。
letter-spacing 屬性明確了文字的間距行為，通常而言，除了關(guān)鍵字 normal，我們還可以指定一個(gè)大小，表示文字的間距。像這樣：
- <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;
- }
- }
我們?cè)O(shè)置文字的 letter-spacing 從 0 -> 36px -> -72px，觀察不同的變化：
CodePen Demo -- 負(fù)letter-spacing倒序排列文字[4]
然而，受到中英文混排或者不同字體的影響，以及倒序后的排列方式，不建議使用這種方式來倒序排列文字。
transition-delay 及 animation-delay 的負(fù)值使用，立刻開始動(dòng)畫
我們知道，CSS 動(dòng)畫及過渡提供了一個(gè) delay 屬性，可以延遲動(dòng)畫的進(jìn)行。
考慮下面這個(gè)動(dòng)畫：
簡單的代碼大概是這樣：
- <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) ;
- }
- }
如果，我們想去掉這個(gè)延遲，希望在一進(jìn)入頁面的時(shí)候，3 個(gè)球就是同時(shí)運(yùn)動(dòng)的。這個(gè)時(shí)候，只需要把正向的 animation-delay 改成負(fù)向的即可。
- .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;
- }
這里，有個(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í)的位置。
CodePen Demo -- 使用負(fù)值 animation-delay 提前執(zhí)行動(dòng)畫[5]
負(fù)值 margin
負(fù)值 margin 在 CSS 中算是運(yùn)用的比較多的，元素的外邊距可以設(shè)置為負(fù)值。
在 flexbox 布局規(guī)范還沒流行之前，實(shí)現(xiàn)多行等高布局還是需要下一番功夫的。其中一種方法便是使用正 padding 負(fù) margin 相消的方法。
有如下一個(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ì)隨著另外一欄變化。
具體的代碼可以看看這里：CodePen Demo -- 正padding負(fù)margin實(shí)現(xiàn)多列等高布局[6]
總結(jié)一下
另外，還有一些大家熟知的沒有單獨(dú)列出來的，譬如：
- 使用負(fù) marign 實(shí)現(xiàn)元素的水平垂直居中
- 使用負(fù) marign隱藏列表 li 首尾多余的邊框
- 使用負(fù) text-indent 實(shí)現(xiàn)文字的隱藏
- 使用負(fù)的 z-index 參與層疊上下文排序
還有一些很深?yuàn)W的，譬如張鑫旭大大在今年的 CSS 大會(huì)上分享的，利用負(fù)的 opacity 在 CSS 中實(shí)現(xiàn)了偽條件判斷，配合 CSS 自定義屬性，使用純 CSS 實(shí)現(xiàn) 360° 的餅圖效果：
第五屆CSS大會(huì)主題分享之CSS創(chuàng)意與視覺表現(xiàn)[7]
最后
額，雖然 CSS 負(fù)值的一些使用場景的確有有用之處，但是與此同時(shí)有可能帶來的是代碼可讀性的下降。有的時(shí)候看到這些代碼不得不好好捋一捋才能緩過神來，再感嘆一句，原來如此。
如果有其他更好的更易理解的實(shí)現(xiàn)方式，具體使用實(shí)現(xiàn)的時(shí)候應(yīng)該好好權(quán)衡一下。
好了，本文到此結(jié)束，希望對(duì)你有幫助 :)
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[8] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
參考資料
[1]CodePen Demo -- 使用outline實(shí)現(xiàn)加號(hào):
https://codepen.io/Chokcoco/pen/PrrLaP
[2]CodePen Demo -- css單側(cè)投影:
https://codepen.io/Chokcoco/pen/pergRb
[3]CodePen Demo -- 使用 scale(-1) 實(shí)現(xiàn)元素的翻轉(zhuǎn):
https://codepen.io/Chokcoco/pen/VoQXVq
[4]CodePen Demo -- 負(fù)letter-spacing倒序排列文字:
https://codepen.io/Chokcoco/pen/QeQXpW
[5]CodePen Demo -- 使用負(fù)值 animation-delay 提前執(zhí)行動(dòng)畫:
https://codepen.io/Chokcoco/pen/ymvjez
[6]CodePen Demo -- 正padding負(fù)margin實(shí)現(xiàn)多列等高布局:
https://codepen.io/Chokcoco/pen/ZgrmVy
[7]第五屆CSS大會(huì)主題分享之CSS創(chuàng)意與視覺表現(xiàn):
https://www.zhangxinxu.com/wordpress/2019/06/cssconf-css-idea/
[8]Github -- iCSS:
https://github.com/chokcoco/iCSS
