Question

因此，基本上，我正在尝试为图像添加边框并通过python3使用img-kit对其进行屏幕截图。我应用了边框半径和实际边框。但是，边框出现在图像内部，而不是对象周围。

这是它的外观；

我尝试了一些来自堆栈溢出的示例，例如添加了padding或margin，但是没有用。

<!DOCTYPE html>
<html>
   <head>
      <title>Profiles | Nekotony</title>
      <style>
         @font-face {
         font-family: 'keepcalm';
         src: url('/home/alice-bot/storage/KeepCalm-Medium.ttf')  format('truetype');
         font-weight: normal;
         font-style: normal;
         }
         body {
            background-color: #1C1C1C;
         }
         .profiles {
         background: url("https://i.imgur.com/0Hl2D6w.jpg") no-repeat;
         background-size: 100%;
         width: 1650px;
         height: 500px;
         background-color: #1C1C1C;
         position: fixed;
         }
         * {
         margin: 0; padding: 0; box-sizing: border-box;
         font-family: 'keepcalm', Fallback, sans-serif;
         }
         .img {
         margin-top: 25px;
         margin-left: 25px;
         width: 450px;
         height: 450px;
         border-width: 5px;
         border-color: #000000;
         border-style: solid;
         border-radius: 250px;
         } 
      </style>
      <meta content="text/html; charset=utf-8" http-equiv="Content-type">
      <meta content="png" name="imgkit-format">
   </head>
   <body>
      <div class="profiles">
          <img class="img" src="https://i.imgur.com/X2XG1tU.png">
      </div>
   </body>
</html>

import imgkit
import jinja2
import string 
    def final_image(self, user):
        html = self.render_template('final.html')
        by = imgkit.from_string(str(html), False, options={"width": 1650,"height": 820,"crop-w" : 1650})
        return by

    def render_template(self, file_name,**context):
        return jinja2.Environment(loader=jinja2.FileSystemLoader('/home/alice-bot/storage/')).get_template(file_name).render(context)

边框出现在图像内而不是图像周围

0 个答案: