成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

11種方法實現(xiàn)一個tips帶有描邊的小箭頭（更新中...）

李濤 / 2239人閱讀

摘要：查看效果第六種和背景描邊旋轉(zhuǎn)此方法就是設(shè)置一個寬度和高度分別為的方塊背景，然后背景相鄰的兩條邊描邊再有的屬性旋轉(zhuǎn)角度，來實現(xiàn)箭頭的朝向。

我們在網(wǎng)頁開發(fā)中實現(xiàn)一個tips時會有一個小箭頭，實現(xiàn)這種方法的文章網(wǎng)上已經(jīng)泛濫了，但有時實現(xiàn)這個小箭頭不止只有單純的三角它還有描邊，今天我們就借那些現(xiàn)有的文章在深入一點來說說如何給tips小箭頭描邊，本章不涉及svg/canvas，沒必要因為我講的是css。

主體樣式：




 .dui-tips{
        position: relative;
        padding: 10px;
        text-align: center;
        border: 1px solid #f60;
        border-radius: 5px;
        background-color: #fff;
    }
第一種border描邊雙層覆蓋：

就是大家常用的border，實現(xiàn)原理就是給其中一條邊設(shè)置顏色寬度及樣式，我這里使用了兩個偽類進行折疊，將一個白色的覆蓋在有顏色的偽類上面，再偏移1px來模擬實現(xiàn)1px的描邊效果，代碼如下：

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: "";
        transform: translate(-50%, 0);
        border-width: 10px 10px 0 10px;
        border-style: solid;
    }
    &:before {
        z-index: 0;
        bottom: -10px;
        border-color: #f60 transparent transparent transparent;
    }
    &:after {
        z-index: 1;
        bottom: -8px;
        border-color: #fff transparent transparent transparent;
    }
}

查看效果

第二種border描邊結(jié)合濾鏡drop-shadow屬性：

第二種是第一種的延伸，使用濾鏡filter的drop-shadow描邊來實現(xiàn)，box-shadow和drop-shadow實現(xiàn)不規(guī)則投影

.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: "";
        transform: translate(-50%, 0);
        border-width: 10px 10px 0 10px;
        border-style: solid;

        bottom: -9px;
        border-color: #fff transparent transparent transparent;
        filter: drop-shadow(0px 2px 0px #f60);
    }
}

查看效果

第三種通過特殊符號或字體雙層覆蓋

第三種方法和第一種類似，通過兩層顏色疊加在有層級的偏移來實現(xiàn)

.dui-tips {
    &:before, &:after {
        font-size: 24px;
        line-height: 18px;
        position: absolute;
        left: 50%;
        display: table;
        content: "◆";
        transform: translate(-50%, 0);
        text-align: center;
    }
    &:before {
        z-index: 0;
        bottom: -10px;
        color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: -8px;
        color: #fff;
    }
}

查看效果

第四種通過text-shadow實現(xiàn)

這種放發(fā)通過給文子設(shè)置1px的陰影來顯描邊效果

.dui-tips {
    &:after {
        font-size: 24px;
        line-height: 18px;
        position: absolute;
        left: 50%;
        display: table;
        content: "◆";
        transform: translate(-50%, 0);
        text-align: center;

        z-index: 1;
        bottom: -8px;
        color: #fff;
        text-shadow: 0 2px 0 #f60;
    }
}

查看效果

第五種 background雙層覆蓋

這種方式設(shè)置兩個寬度和高度分別為10px的方塊背景，再給兩層背景分別設(shè)置不同的顏色，再通過兩層背景顏色疊加，經(jīng)過層級偏移再有transform的rotate屬性旋轉(zhuǎn)角度，來實現(xiàn)箭頭的朝向。

.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: "";
        margin-left: -5px;
        transform: rotate(-45deg);
    }
    &:before {
        z-index: 0;
        bottom: -6px;
        background-color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: -5px;
        background-color: #fff;
    }
}

查看效果

第六種background和border背景描邊旋轉(zhuǎn)

此方法就是設(shè)置一個寬度和高度分別為10px的方塊背景，然后背景相鄰的兩條邊描邊再有transform的rotate屬性旋轉(zhuǎn)角度，來實現(xiàn)箭頭的朝向。

.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        margin-left: -5px;
        content: "";
        transform: rotate(-45deg);

        z-index: 1;
        bottom: -6px;
        border-bottom: 1px solid #f60;
        border-left: 1px solid #f60;
        background-color: #fff;
    }
}

查看效果

第七種background和box-shadow 
.dui-tips {
    &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: "";
        margin-left: -5px;
        transform: rotate(-45deg);

        z-index: 1;
        bottom: -5px;
        background-color: #fff;
        box-shadow: -1px 1px 0 #f60;
    }
}

查看效果

第八種linear-gradient 
.dui-tips{
    &:before, &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: "";
        margin-left: -5px;
        transform: rotate(-135deg);
    }
    &:before {
        z-index: 0;
        bottom: -6px;
        background: linear-gradient(-45deg, transparent 7px, #f60 0);
    }
    &:after {
        z-index: 1;
        bottom: -5px;
        background: linear-gradient(-45deg, transparent 7px, #fff 0);
    }
}

查看效果

第九種linear-gradient和box-shadow 
.dui-tips{
    &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: "";
        margin-left: -5px;
        transform: rotate(-135deg);

        z-index: 1;
        bottom: -5px;
        background: linear-gradient(-45deg, transparent 7px, #fff 0);
        box-shadow: -1px -1px 0 #f60
    }
}

查看效果

第十種linear-gradient和border 
.dui-tips{
    &:after{
        position: absolute;
        left: 50%;
        display: table;
        width: 10px;
        height: 10px;
        content: "";
        margin-left: -5px;
        transform: rotate(-135deg);

        z-index: 1;
        bottom: -6px;
        background: linear-gradient(-45deg, transparent 7px, #fff 0);
        border-top: 1px solid #f60;
        border-left: 1px solid #f60;
    }
}

查看效果

第十一種ouline 
.dui-tips {
    &:before, &:after {
        position: absolute;
        left: 50%;
        display: table;
        width: 0;
        height: 0;
        content: "";
        transform: rotate(45deg);
        outline-style: solid;
        outline-width: 5px;
    }
    &:before {
        z-index: 0;
        bottom: -1px;
        outline-color: #f60;
    }
    &:after {
        z-index: 1;
        bottom: 0;
        outline-color: #fff;
    }
}

查看效果

作者： w3cbest前端開發(fā)
互動： 如有疑問可進群討論
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系@w3cbest前端開發(fā)獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明原鏈接及出處。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53477.html

相關(guān)文章

  • 11種方法實現(xiàn)一個tips帶有描邊的小箭頭（更新中...）

    摘要：查看效果第六種和背景描邊旋轉(zhuǎn)此方法就是設(shè)置一個寬度和高度分別為的方塊背景，然后背景相鄰的兩條邊描邊再有的屬性旋轉(zhuǎn)角度，來實現(xiàn)箭頭的朝向。 showImg(https://segmentfault.com/img/bVbmX2F?w=400&h=277); 我們在網(wǎng)頁開發(fā)中實現(xiàn)一個tips時會有一個小箭頭，實現(xiàn)這種方法的文章網(wǎng)上已經(jīng)泛濫了，但有時實現(xiàn)這個小箭頭不止只有單純的三角它還有描邊...

    oneasp 評論0 收藏0

  • 使用SVG + CSS實現(xiàn)動態(tài)霓虹燈文字效果

    摘要：早上無意間進入一個網(wǎng)站，看到他們的效果略屌，如圖剛開始以為是動畫之類的，審查元素發(fā)現(xiàn)居然是用動畫實現(xiàn)的，頓時激起了我的欲望，決定要一探究竟，查看代碼之后，發(fā)現(xiàn)原理居然是如此簡單多個描邊動畫使用不同的即可對于一個形狀元素或文本元素，可以使用 早上無意間進入一個網(wǎng)站，看到他們的LOGO效果略屌，如圖：showImg(https://segmentfault.com/img/bVT9At?w...

    IntMain 評論0 收藏0

  • canvas基礎(chǔ)知識點（一）

    摘要：給設(shè)置寬高標簽的寬高默認是是一個行內(nèi)塊元素可以在標簽上通過，來設(shè)置可以在中給對象設(shè)置注意不要通過來調(diào)整的寬高導(dǎo)致內(nèi)部的畫布被拉伸，圖形變形獲取畫筆工具繪圖都是通過標簽的畫筆來進行的注意，不要寫成，里面?zhèn)魅氲膮?shù)目前也只有這一種情況描邊和填充 給canvas設(shè)置寬高： canvas標簽的寬高默認是300*150,是一個行內(nèi)塊元素 可以在canvas標簽上通過width，height...

    ephererid 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<