CSS的負(fù)值技巧有哪些

這篇文章主要介紹“ CSS的負(fù)值技巧有哪些”，在日常操作中，相信很多人在 CSS的負(fù)值技巧有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答” CSS的負(fù)值技巧有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

使用負(fù)值 outline-offset 實現(xiàn)加號

假設(shè)我們有這樣一個簡單的結(jié)構(gòu)：

<div></div> 

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

修改 outline-offset 到一個合適的負(fù)值 ，那么在恰當(dāng)?shù)臅r候，outline 邊框就會向內(nèi)縮進(jìn)為一個加號。

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

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

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

CodePen Demo -- 使用outline實現(xiàn)加號[1]

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

• 容器得是個正方形

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

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

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

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

單側(cè)投影

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

OK，那如果要生成一個單側(cè)的投影呢?

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

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

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

這里有一個小技巧，擴(kuò)張半徑可以為負(fù)值。

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

image

CodePen Demo -- css單側(cè)投影[2]

使用 scale(-1) 實現(xiàn)翻轉(zhuǎn)

通常，我們要實現(xiàn)一個元素的 180&deg; 翻轉(zhuǎn)，我們會使用 transform: rotate(180deg)，這里有個小技巧，使用 transform:  scale(-1) 可以達(dá)到同樣的效果?？磦€ 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) 實現(xiàn)元素的翻轉(zhuǎn)[3]

使用負(fù) letter-spacing 倒序排列文字

與上面 scale(-1) 有異曲同工之妙的是負(fù)的 letter-spacing。

letter-spacing 屬性明確了文字的間距行為，通常而言，除了關(guān)鍵字 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;     } }

我們設(shè)置文字的 letter-spacing 從 0 -> 36px -> -72px，觀察不同的變化：

CodePen Demo -- 負(fù)letter-spacing倒序排列文字[4]

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

transition-delay 及 animation-delay 的負(fù)值使用，立刻開始動畫

我們知道，CSS 動畫及過渡提供了一個 delay 屬性，可以延遲動畫的進(jìn)行。

考慮下面這個動畫：

簡單的代碼大概是這樣：

<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) ;     } }

如果，我們想去掉這個延遲，希望在一進(jìn)入頁面的時候，3 個球就是同時運動的。這個時候，只需要把正向的 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; }

這里，有個小技巧，被設(shè)置了 animation-dealy  為負(fù)值的動畫會立刻執(zhí)行，開始的位置是其動畫階段中的一個階段。所以，動畫在一開始的時刻就是下面這樣：

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

CodePen Demo -- 使用負(fù)值 animation-delay 提前執(zhí)行動畫[5]

負(fù)值 margin

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

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

有如下一個布局：

左右兩欄的內(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; }

可以做到無論左右兩欄高度如何變化，高度較低的那一欄都會隨著另外一欄變化。

具體的代碼可以看看這里：CodePen Demo -- 正padding負(fù)margin實現(xiàn)多列等高布局[6]

到此，關(guān)于“ CSS的負(fù)值技巧有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>