html - 使用CSS的文本上的图像边框？

Question

我见过使用 text-shadow 使文本具有纯色轮廓的代码，就像这篇文章描述的那样：CSS Font Border？但我想使用图像作为边框。当我添加

border-image: url (  ); 

到这段代码：

.mytext {
background: url( ); 
-webkit-text-fill-color: transparent; 
-webkit-background-clip: text; 
}

它在整段文本周围添加了一个图像边框，而不是一个与字母轮廓相呼应的边框。有什么解决办法吗？

Answer 1

像这样的阴影并在单个 div 中赋予多个边框

.imgtag{
background:url(http://www.gravatar.com/avatar/1e8f64b9e6549d2664907753f7df05e3?s=32&d=identicon&r=PG) no-repeat 0 0;
  width:100px;
  height:100px;
  border:solid 10px red;
  box-shadow:0 0 0 4px green, 0 0 0 10px yellow , 0 0 0 15px pink , 0 0 0 20px black ;
  margin:100px;
}

现场演示