欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2020-04-17 16:11:16   作者：coderhf   我要評論
這篇文章主要介紹了利用CSS中的 outline-offset 屬性實現(xiàn)加號,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-left: 100px;
            margin-top: 100px;
            padding: 0;
            width: 200px; 
            height: 200px;
            background-color: green;
            outline: 20px solid #000;
            outline-offset: 10px;
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

其效果如下:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-left: 100px;
            margin-top: 100px;
            padding: 0;
            width: 200px; 
            height: 200px;
            background-color: green;
            outline: 20px solid #000;
            animation: move 3s infinite;

}   
@keyframes move {
    0% {
        outline-offset: 10px;
    }

    100% {
        outline-offset: -118px;
    }
}     
    </style>
</head>
<body>
    <div></div>
</body>
</html>

其效果如下:

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .g_container {
            position: absolute;
            margin: 100px 0 0 500px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
            border-radius: 50%;
        }
       .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) ;
    }
}

    </style>
</head>
<body>
    <div class="g_container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

看看效果：

當(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;
}

其效果我就不說了,就是同時運動,可參照上面的那個效果

負(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 相消的方法填充左右兩欄：

.left {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.right {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

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

總結(jié)一下

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

  • 使用負(fù) marign 實現(xiàn)元素的水平垂直居中
  • 使用負(fù) marign隱藏列表 li 首尾多余的邊框
  • 使用負(fù) text-indent 實現(xiàn)文字的隱藏
  • 使用負(fù)的 z-index 參與層疊上下文排序

總結(jié)

到此這篇關(guān)于利用CSS中的 outline-offset 屬性實現(xiàn)加號的文章就介紹到這了,更多相關(guān)css outline-offset 屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解

    這篇文章主要介紹了css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面
    2020-09-14

  • 詳解HTML5中CSS外觀屬性

    這篇文章主要介紹了HTML5中CSS外觀屬性的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，,需要的朋友可以參考下
    2020-09-10

  • CSS中簡寫屬性要注意TRouBLe的順序問題(避免踩坑)

    這篇文章主要介紹了CSS中簡寫屬性要注意TRouBLe的順序問題(避免踩坑),本文通過實例代碼給大家介紹的非常詳細(xì)，大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參
    2020-08-10

  • CSS字體、文本、列表屬性詳細(xì)介紹

    這篇文章主要介紹了CSS字體、文本、列表屬性的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-07-22

  • 奇妙的 CSS 屬性 MASK詳解

    這篇文章主要介紹了奇妙的 CSS 屬性 MASK，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2020-07-07

  • CSS 繼承 inherit屬性的方法

    這篇文章主要介紹了CSS 繼承 inherit屬性的方法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-05-09

  • css一些不常見但很有用的屬性操作大全

    這篇文章主要介紹了css一些不常見但很有用的屬性操作大全,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-09-28

最新評論