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

FrozenMap 發(fā)布于2019-08-30 15:44 / 1996人閱讀

摘要：大家最為熟知的就是負(fù)，使用負(fù)的，可以用來(lái)實(shí)現(xiàn)類似多列等高布局垂直居中等等。那還有沒(méi)有其他一些有意思的負(fù)值使用技巧呢下文就再介紹一些負(fù)值有意思的使用場(chǎng)景。但是希望無(wú)論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多，兩欄的高度始終保持一致。

寫(xiě)本文的起因是，一天在群里有同學(xué)說(shuō)誤打誤撞下，使用負(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ǎn)單的結(jié)構(gòu)：

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)過(guò)一番嘗試，修改上述 div 的 outline-offset為 -118px。

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

加個(gè)動(dòng)畫(huà)效果，大概是這樣：

CodePen Demo -- 使用outline實(shí)現(xiàn)加號(hào)

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

容器得是個(gè)正方形

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

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

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

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

單側(cè)投影

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

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

我們來(lái)看看 box-shadow 的用法定義：

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

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

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

繼續(xù)，如果陰影的模糊半徑，與負(fù)的擴(kuò)張半徑一致，那么我們將看不到任何陰影，因?yàn)樯傻年幱皩⒈话谠瓉?lái)的元素之下，除非給它設(shè)定一個(gè)方向的偏移量。所以這個(gè)時(shí)候，我們給定一個(gè)方向的偏移值，即可實(shí)現(xiàn)單側(cè)投影：

CodePen Demo -- 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：

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) 實(shí)現(xiàn)元素的翻轉(zhuǎn)

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

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

letter-spacing 屬性明確了文字的間距行為，通常而言，除了關(guān)鍵字 normal，我們還可以指定一個(gè)大小，表示文字的間距。像這樣：

倒序排列文字

.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倒序排列文字

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

transition-delay 及 animation-delay 的負(fù)值使用，立刻開(kāi)始動(dòng)畫(huà)

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

考慮下面這個(gè)動(dòng)畫(huà)：

簡(jiǎn)單的代碼大概是這樣：

.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)入頁(yè)面的時(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à)會(huì)立刻執(zhí)行，開(kāi)始的位置是其動(dòng)畫(huà)階段中的一個(gè)階段。所以，動(dòng)畫(huà)在一開(kāi)始的時(shí)刻就是下面這樣：

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

CodePen Demo -- 使用負(fù)值 animation-delay 提前執(zhí)行動(dòng)畫(huà)

負(fù)值 margin

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

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

有如下一個(gè)布局：

GPU云服務(wù)器云服務(wù)器 css技巧 css與html的區(qū)別 html與css的區(qū)別說(shuō)說(shuō)你所了解的人工智能

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/116259.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

FrozenMap

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

spinservers：圣何塞10Gbps帶寬服務(wù)器$109/月起,達(dá)拉斯10Gbps服務(wù)器$89/

閱讀 1485·2021-09-28 09:43
C語(yǔ)言指針+二維數(shù)組詳解（應(yīng)付期末、考研的最強(qiáng)筆記，建議收藏）

閱讀 4403·2021-09-04 16:41
你所不知道的 CSS 負(fù)值技巧與細(xì)節(jié)

閱讀 1997·2019-08-30 15:44
「車(chē)來(lái)了公交線路規(guī)劃」小程序，實(shí)現(xiàn)公交出行服務(wù)信息精準(zhǔn)可視化

閱讀 3909·2019-08-30 15:43
使用Excel消費(fèi)C4C的OData service

閱讀 848·2019-08-30 14:21
學(xué)不動(dòng)了，來(lái)點(diǎn)有趣的吧

閱讀 2103·2019-08-30 11:00
css3 漸變

閱讀 3401·2019-08-29 16:20
CSS相關(guān)文章

閱讀 2051·2019-08-29 14:21

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

***你所不知道的 CSS* 陰影技巧與*細(xì)節(jié)***

***你所不知道的 CSS* 陰影技巧與*細(xì)節(jié)***

***CSS* 濾鏡技巧與*細(xì)節(jié)***

優(yōu)秀博文收藏（不定期更新）