通常我看到這種效果，都是直接ps解決，但是不斷重申效能的今天，顯然不適應時代的需求啊！

今天看到群裡有人問這種效果怎麼做了，我在思考的時候，有人已經給出答案了；

我就測試了一下，發現確實可以實現，總結了下，就記一下吧

    width: 104px;

    height: 26px;

    border-width: 11px;

    border-style: solid;

    border-color: yellow red;

    background-color: red;

上面的css直接放在一個div上就可以實現了，另外這個border-color的寫法，按照老規矩是宣告上右下左的做法，是上下為黃色，左右為紅色。在border的寬度擴張的到一定程度就會呈現圖片效果。

另外border的宣告順序有規則的，最好是像上述css分開來寫，因為border連寫的順序會影響效果