vue build後border-image不顯示問題,奇恥大坑!
阿新 • • 發佈:2021-01-29
技術標籤:Vue
.oneChart { width: 25vw; height: $dash3Hei; position: relative; &:before{ content: ""; width: inherit; height: inherit; border: 2px solid transparent; border-width: 2.125rem 1.583rem 0.875rem 5.5rem; border-image: url('../assets/echarts/border.png') 51 38 21 132; display: block; position: absolute; } }
給一個元素加了個邊框,本地執行沒問題,效果不錯-———————build一下再看,發現邊框跑丟了,以為是路徑問題,一通修改,無效!
檢查編譯前後程式碼,瞅兩眼??
編譯後發現border屬性被移到了border-image後面,what's fuck?,太坑了吧,border-image要使用一定要在前面定義border-style
沒辦法,那就改為如下,將border拆分寫,ok大功告成
.oneChart { width: 25vw; height: $dash3Hei; position: relative; &:before{ content: ""; width: inherit; height: inherit; // border: 2px solid transparent; border-style:solid; border-color:transparent; border-width: 2.125rem 1.583rem 0.875rem 5.5rem; border-image: url('../assets/echarts/border.png') 51 38 21 132; display: block; position: absolute; } }