div四角邊框——linear-gradient
阿新 • • 發佈:2019-01-14
效果圖上先:
接著程式碼:
.border { margin: 300px auto; width: 200px; height: 100px; background: linear-gradient(blue, blue) left top, linear-gradient(blue, blue) left top, linear-gradient(blue, blue) right top, linear-gradient(blue, blue) right top, linear-gradient(blue, blue) left bottom, linear-gradient(blue, blue) left bottom, linear-gradient(blue, blue) right bottom, linear-gradient(blue, blue) right bottom; background-repeat: no-repeat; background-size: 1px 24px, 24px 1px; }
這裡主要是利用了一個background可以定義多個linear-gradient,且可以定義位置的原理實現。
此時的linear-gradient的主要作用不再是線性漸變,所以多餘的屬性可以去掉,定義兩個相同的顏色即可,然後接線條位置。
這裡總共有8條線,第一條線對應background-size為1px 24px;第二條線對應24px 1px。後續幾條線重複,所以省略了。
background-repeat: no-reapeat;表示每條線不需要重複。
更新:拓展(背景漸變的完全體)----四角邊框,上下邊框純色,左右邊框漸變色,整體純色
程式碼
.el-card{ background: radial-gradient(circle at center center, rgba(23, 48, 78, 1), rgba(20, 37, 63, 1)), linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left top, linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left top, linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right top, linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right top, linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left bottom, linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left bottom, linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right bottom, linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right bottom, linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top, linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom, linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left, linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right; background-repeat: no-repeat; background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%; background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%; }