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

Question

我见过使用文本阴影使文本具有纯色轮廓的代码，如这篇文章所述: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;
}

Live demo