HTML/CSS - 自定义图像边框

Question

首先，我想指出我对 CSS 有点陌生:)

我正在尝试在图像周围制作自定义图像边框，但我无法弄清楚哪里出了问题。

基本上，我需要做到这一点:

Pic of the final result

，这是我想出的代码:

<div class="AboutMeImage">
<a href="https://s22.postimg.org/ma6wrg5r5/girl-in-winter.jpg">
<img class="test-img img-responsive" src="https://s22.postimg.org/ma6wrg5r5/girl-in-winter.jpg" alt="test photo" />
 </a>
</div>


.AboutMeImage {
clear: both;
margin-left:auto;
margin-right: auto;
height: auto;
width: 40%;
}

.test_img {
border: 10px solid transparent;
border-image: url(https://s24.postimg.org/tpxcnhk51/image_holder1.png) 602 774 0 0 stretch;  

.img-responsive {
display: block;
height: auto;
max-width: 100%;
}

https://jsfiddle.net/KC87/956purro/6/

求助!

Answer 1

首先，你的类名在 css 中是错误的，在 html 中你有 test-img 而在 css 中你将它写为 test_img

请应用此样式。

.test-img {
  border: 10px solid #3778ff;
  height: 40vh;
  border-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/pink-doily-bdr.png") 30;
  }

工作示例

https://jsfiddle.net/bilawalkhan/956purro/9/