你所不知道的 CSS 負值技巧與細節

FrozenMap 發布于2019-08-30 15:44 / 1923人閱讀

摘要：大家最為熟知的就是負，使用負的，可以用來實現類似多列等高布局垂直居中等等。那還有沒有其他一些有意思的負值使用技巧呢下文就再介紹一些負值有意思的使用場景。但是希望無論左側內容較多還是右側內容較多，兩欄的高度始終保持一致。

寫本文的起因是，一天在群里有同學說誤打誤撞下，使用負的 outline-offset 實現了加號。嗯？好奇的我馬上也動手嘗試了下，到底是如何使用負的 outline-offset 實現加號呢？

使用負值 outline-offset 實現加號

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

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: 10px;
}

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

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

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: -118px;
}

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

CodePen Demo -- 使用outline實現加號

很有意思，我嘗試了很多不同的情況，最后總結了一個簡單的規律，要使用負的 outline-offset 生成一個加號有一些簡單的限制：

容器得是個正方形

outline 邊框本身的寬度不能太小

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

在這個例子后，我又想，CSS 屬性可以取負值的地方有很多。大家最為熟知的就是負margin，使用負的 marign，可以用來實現類似多列等高布局、垂直居中等等。那還有沒有其他一些有意思的負值使用技巧呢？

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

單側投影

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

OK，那如果要生成一個單側的投影呢？

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

{
    box-shadow: none | [inset? && [   ? ? ? ] ]#
}

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

這里有一個小技巧，擴張半徑可以為負值。

繼續，如果陰影的模糊半徑，與負的擴張半徑一致，那么我們將看不到任何陰影，因為生成的陰影將被包含在原來的元素之下，除非給它設定一個方向的偏移量。所以這個時候，我們給定一個方向的偏移值，即可實現單側投影：

CodePen Demo -- css單側投影

使用 scale(-1) 實現翻轉

通常，我們要實現一個元素的 180° 翻轉，我們會使用 transform: rotate(180deg)，這里有個小技巧，使用 transform: scale(-1) 可以達到同樣的效果。看個 Demo：

CSS Nagative Scale(-1)

.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) 實現元素的翻轉

使用負 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 為負值的動畫會立刻執行，開始的位置是其動畫階段中的一個階段。所以，動畫在一開始的時刻就是下面這樣：

以上述動畫為例，一個被定義執行 3s 的動畫，如果 animation-delay 為 -1s，起點相當于正常執行時，第2s（3-1）時的位置。

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

負值 margin

負值 margin 在 CSS 中算是運用的比較多的，元素的外邊距可以設置為負值。

在 flexbox 布局規范還沒流行之前，實現多行等高布局還是需要下一番功夫的。其中一種方法便是使用正 padding 負 margin 相消的方法。

有如下一個布局：

GPU云服務器云服務器 css技巧 css與html的區別 html與css的區別說說你所了解的人工智能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116259.html

你所不知道的 CSS 陰影技巧與細節

摘要：本文的題目是陰影技巧與細節。立體投影好，我們繼續。下一個主題是立體投影。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當然不行。關于 CSS 陰影，之前已經有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關于 box-shadow 的用法。最近一個新的項目，CSS-Inspira...

supernavy 2019-08-29 17:12 評論0 收藏0
你所不知道的 CSS 陰影技巧與細節

摘要：本文的題目是陰影技巧與細節。下一個主題是立體投影。正常而言，我們使用來生成文字陰影，像這樣嗯，挺好的，就是不夠立體。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當然不行。關于 CSS 陰影，之前已經有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關于?box-shadow?的用法。最近...

stormzhang 2019-04-23 13:13 評論0 收藏0
CSS 濾鏡技巧與細節

摘要：簡單來說，濾鏡就是提供類似的圖形特效，像模糊，銳化或元素變色等功能。常用用法既然是標題是你所不知道的技巧與細節，那么比較常用的一些用法就不再贅述，通常我們見得比較多的濾鏡用法有使用生成毛玻璃效果使用生成整體陰影效果使用生成透明度本文主要介紹 CSS 濾鏡的不常用用法，希望能給讀者帶來一些干貨！注意：ie不兼容本文所描述的濾鏡，指的是 CSS3 出來后的濾鏡，不是 IE 系列時代的濾鏡，話...

tinylcy 2019-04-23 13:34 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 評論0 收藏0