Question

首先，我想指出我对CSS有点新鲜：）

我试图在图片周围制作自定义图片边框，但我无法弄清楚这一切都出错了。

基本上，我需要实现这一目标：

，这是我提出的代码：

<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/

Answer 2

检查以下修改后的代码。您可以根据需要更多地自定义边框。Click to view the code

img {
  outline: 1px solid black;
  outline-offset: -4px;
}

HTML / CSS - 自定义图像边框

2 个答案: