如何在HTML中为图片添加带实线的背景边框效果？

要实现你想要的头像外围偏移实线效果，只需要给图片添加一个容器，利用CSS伪元素来创建边框即可，以下是修改后的完整代码：

修改后的HTML #

<section class="about">
  <div class="content">
    <div class="profile-img-wrapper">
      <img src="data:image/jpeg;base64,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" alt="个人头像">
    </div>
    <div class="text">
      <h1>About Me</h1>
      <h5>Web Developer</h5>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid molestiae iste accusantium rerum magnam reprehenderit possimus voluptatem fugiat, fugit recusandae, animi ipsum. Esse, similique! Consequatur delectus vel ab eos eveniet?</p>
      <button>Hire Me</button>
    </div>
  </div>
</section>

修改后的CSS #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.about {
  width: 100%;
  height: 100vh;
  background-color: #161922;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 新增头像容器样式 */
.profile-img-wrapper {
  position: relative;
  width: 300px;
}

.about .content .profile-img-wrapper img {
  height: auto;
  width: 100%;
  border-radius: 0.5rem;
  position: relative;
  z-index: 1;
}

/* 用伪元素创建偏移边框 */
.profile-img-wrapper::before {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  border: 2px solid #ffcc74;
  border-radius: 0.5rem;
  z-index: 0;
}

.text {
  width: 550px;
  max-width: 100%;
  padding: 0 10px;
}

.content {
  width: 1280px;
  max-width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.text h1 {
  color: #ffcc74;
  font-size: 85px;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.text h5 {
  color: white;
  font-size: 25px;
  margin-bottom: 25px;
  text-transform: capitalize;
  letter-spacing: 2px;
}

.text p {
  color: #c0c4d4;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 45px;
}

button {
  background-color: #ffcc74;
  color: black;
  border: 2px solid transparent;
  text-decoration: none;
  padding: 10px 30px;
  border-radius: 30px;
  font-size: 17px;
  font-weight: bold;
}

button:hover {
  transform: scale(1.2);
  background-color: transparent;
  border: 2px solid #ffcc74;
  color: #ffcc74;
  transition: .4s;
  cursor: pointer;
}

@media screen and (max-width: 1180px) {
  .about {
    width: 100%;
    height: auto;
    padding: 70px 0px;
  }
}

@media screen and (max-width: 650px) {
  .profile-img-wrapper {
    margin-bottom: 35px;
  }
  .text h1 {
    font-size: 60px;
    margin-bottom: 25px;
  }
}

关键修改说明 #

1. 添加头像容器：给图片套一个.profile-img-wrapper容器，设置相对定位，用来承载伪元素边框。
2. 伪元素边框：利用::before伪元素创建一个比图片大一圈的边框，通过top/right/bottom/left的负值偏移实现错位效果，颜色用你现有主题的#ffcc74保持风格统一。
3. 层级控制：给图片设置z-index:1，伪元素设置z-index:0，确保边框在图片下方。
4. 响应式调整：把原来给图片的margin-bottom移到容器上，保证移动端布局正常。

内容的提问来源于stack exchange，提问作者Piyush Shrivastava