如何将图片固定在边框上面

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .box {
        position: relative;
        width: 300px;
        height: 300px;
        border: 8px solid black;
        border-radius: 200px;
      }
      img {
        position: absolute;
        top: -20px;
        left: -20px;
        width: 340px;
        height: 340px;
        border-radius: 200px;
      }
    </style>
  </head>
  <body>	
	<div class="box">
      <img src="NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_5.jpg"/>
    </div>
  </body>
</html>
<p>要让图片固定在边框上面，可以使用绝对定位。修改代码如下：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot; name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;&gt;
	&lt;title&gt;WebCat&lt;/title&gt;
    &lt;style&gt;
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .box {
        position: relative;
        width: 300px;
        height: 300px;
        border: 8px solid black;
        border-radius: 200px;
      }
      img {
        position: absolute;
        top: -20px;
        left: -20px;
        width: 340px;
        height: 340px;
        border-radius: 200px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;	
	&lt;div class=&quot;box&quot;&gt;
      &lt;img src=&quot;NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_5.jpg&quot;/&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>在上述代码中，我添加了<code>.box</code>类的<code>position: relative;</code>样式，以便将<code>img</code>元素定位相对于<code>.box</code>元素。然后，我给<code>img</code>元素添加了<code>position: absolute;</code>样式，并通过调整<code>top</code>和<code>left</code>属性的值，使图片固定在边框上面。同时，我还调整了图片的大小，使其超出边框一些，以便能够覆盖住边框。</p>