如何實現特殊的邊框樣式

班主任發表於2020-02-18

一、專案需求

鄙人不才，最近做的專案中遇到一個小需求，就是實現一個有拐點的邊框。這是個簡單的需求，相信大家都實現過，可能你實現的樣式是這樣的,如下圖紅色邊框中樣式所示>>>>>

如何實現特殊的邊框樣式
者是這樣的>>>>>>>

如何實現特殊的邊框樣式
又或者是這樣的

如何實現特殊的邊框樣式

其實這些樣式都大同小異，都可以通過簡單的css樣式去實現，相信聰明的同學看到這裡已經有完美的解決方案了。我還記得我剛入職時候，最怕遇見這種樣式，這真是令人頭大，因為本人之前是做的後端，前端懂得不多，到了這個東家，才做起了前端，還別說，前端其實挺有意思的。到現在前前後後也學了點東西。懂的不多，寫的不好，各位兄臺不要見笑。

二、話不多說，直奔主題

還記得剛接觸手這種小需求時，因為沒有前端功底，所以就沒想太多，上去就是一個幹上一個div， 或者是幹上一個span,然後慢慢的去調樣式。 其實主要就是調整邊界線的位置，不過後來隨著乾的多了，發現【臥槽！】老這樣幹也不行啊，得換種方式啊， 使用標籤調位置是很噁心的，誇張點說是牽一髮二動全身。 後來慢慢的學到了新方法，使用border-image+liner-gradient實現特殊的邊框樣式， 你還別說，真好使。比如圖一所示的邊界線我們們可以用以下程式碼實現(後文附github地址)

    <div class="div1"></div>
    <style>
     width: 100px;
        height: 100px;
        border: 10px solid rgb(22, 233, 15);
        border-image: linear-gradient(rgb(255, 0, 0),rgb(255, 255, 0)) 100 90 0 100;
        border-right: none;
    </style>
複製程式碼

其實使用border-image確實是好使了很多，比用標籤實現這種樣式方便了很多。後來的很長一段時間，遇到這樣的小需求，二話不說直接開幹，border-image直接往上懟！直到有一天遇到了圖二和圖三的樣式。【臥槽！】鄙人才疏學淺用一個border-image搞不定啊。要不然先實現效果，div,span標籤往上懟？ 不可能！這不是一名優秀的前端工程師乾的事！要幹就要幹一票大的（** 盡力尋找最優解 **）！ 於是乎background出場了！你沒看錯，就是那個不起眼的background。 圖二的實現方式如下所示（後文附github地址）

    <div class="div2"></div>
    <style>
    .div2 {
        width: 200px;
        height: 200px;
        background:
                linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 1%, transparent 1%, transparent 100%),
                linear-gradient(-90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, transparent 100%);
            background-size: 2px 100%;
            background-repeat: no-repeat;
    }
    
    </style>
複製程式碼

其實它的實現方式也離不開liner-gradient,看見漸變學好了，用武之地其實不會少。 圖二和圖三類似，但是現實方式有些許出入。可以看出圖三是展開後的列表，左右兩個小邊框長度是一定的， 不能因為列表的伸展而拉伸變長，圖二實現的程式碼，liner-grident中的百分比會造成列表高度變化時，左右兩個邊框高度會邊長，因此我們可以用以下方式去實現圖三的效果（後文附git地址）

<div class="div3"></div>
<style>
background:
                linear-gradient(90deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
                linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
                linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
                linear-gradient(90deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
                linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat,
                linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 50%) no-repeat;
            background-position: 0 0, 100% 0%, 100% 100%, 0 100%, 0 100%, 0 0;
            background-size: 100% 2px, 2px 10px, 2px 10px, 100% 2px, 2px 10px, 2px 10px;
</style>
複製程式碼

上面的方法可以解決高度變化導致的邊框拉伸問題。但是還是不夠完美，還有改善的空間。

三、小結

上面就是鄙人實現特殊邊框樣式的方法，這種方法肯定有很多，我這裡不做贅述了。如果大家覺得上面的解決辦法有用的話，歡迎【收藏】+【關注】,** 後面還會給大家分享一些開發中的小技巧 ** 最後，給大家附上專案地址【裡面有常用小技巧，歡迎查閱，記得給個start，不勝感激！】
github倉庫

相關文章