使用圖片當(dāng)做邊框的原理：將圖片設(shè)為背景，在圖片的上方疊加一層內(nèi)容區(qū)域背景色的漸變。并給兩個(gè)背景指定不同的background-clip值。
padding: 1em;
border: 1em solid transparent; //透明的邊框使得能看見底部的背景圖片
background: linear-gradient(white,white),
url("kazusa.png");
background-size: cover; //將整張圖片適應(yīng)盒子的大小
background-clip: padding-box,border-box; //不同的值使得渲染兩層背景的顯示位置不同。
background-origin: border-box; //圖片默認(rèn)是從padding位置開始渲染，將背景圖片設(shè)為從border區(qū)域開始渲染。這樣border的透明區(qū)域就不會(huì)出線圖片拼接的怪異樣式。
使用這一技巧還可以實(shí)現(xiàn)類似信封樣式的邊框。
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,red 0,red 12.5%,transparent 0,transparent 25%,#58a 25%,#58a 37.5%,transparent 0,transparent 50%);
background-size: 100%,40px 40px;
給漸變邊框加上動(dòng)畫，還可以實(shí)現(xiàn)螞蟻線效果。
演示地址：http://runjs.cn/code/y5fh1hlp
2、腳注效果
在border-image屬性中使用漸變可以實(shí)現(xiàn)文字的腳注效果。
border-top: 3px solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,currentColor 3em,transparent 0);
