如何利用CSS中的outline-offset屬性實現(xiàn)加號

這篇文章給大家分享的是有關(guān)如何利用CSS中的outline-offset屬性實現(xiàn)加號的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司2013年至今，先為墨竹工卡等服務(wù)建站，墨竹工卡等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為墨竹工卡企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

假設(shè)有這么一個初始代碼:




    
    
    Document

其效果如下:

如何利用CSS中的outline-offset屬性實現(xiàn)加號

然后再把這個outline-offset屬性的值改為-118px,那么就會把邊框變成一個加號當(dāng)然我這里為了效果顯著一些,我加了一個動畫效果來顯示,如下代碼:




    
    
    Document

其效果如下:

如何利用CSS中的outline-offset屬性實現(xiàn)加號

使用outline-offset做加號的總結(jié)

我覺得這個很有意思,在這里我試了很多次,在這里我總結(jié)了一下使用outline-offset屬性負值的條件：

容器必須是個正方形
outline 邊框本身的寬度不能太小
outline-offset 負值 x 的取值范圍為: -(容器寬度的一半 + outline寬度的一半) < x < -(容器寬度的一半 + outline寬度)

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

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

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

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




    
    
    Document

當(dāng)然,如果想要讓三個球同時運動,去掉這個延遲,那么可以改成這樣的代碼:

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

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

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

左右兩欄的內(nèi)容都是不確定的，也就是高度未知。但是希望無論左側(cè)內(nèi)容較多還是右側(cè)內(nèi)容較多，兩欄的高度始終保持一致。

OK，其中一種 Hack 辦法便是使用一個很大的正 padding 和相同的負 margin 相消的方法填充左右兩欄：

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

除了這些,還有很多的屬性,例子沒有列出來(因作者的水平和時間有限)，例如：

感謝各位的閱讀！關(guān)于“如何利用CSS中的outline-offset屬性實現(xiàn)加號”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站建設(shè)知識

如何利用CSS中的outline-offset屬性實現(xiàn)加號

其他資訊