javascript - 如何添加设定的边框半径？

Question

我在网上浏览了一下，看到一篇关于每次刷新页面时都会更改 img 和引用的帖子，并且它处于堆栈溢出状态 这是代码，归功于原始开发人员，但我只想知道在哪里可以添加类 img-circle ，以便它可以在 css 中工作以具有图像的圆形边框，抱歉这是我的第一篇文章在 Stackoverflow 中

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "/image/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];
  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img src="' + quote.img + '">';
})();

Answer 1

只需将其添加到 img 代码中即可:

'<img class="img-circle" src="' + quote.img + '">';

完整代码:

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "/image/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];

  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img class="img-circle" src="' + quote.img + '">';
})();

希望这有帮助。

(function() {
  var quotes = [
    {
      text: "text1",
      img:  "/image/FqBE6.jpg?s=32&g=1"
    },
    {
      text: "text2",
      img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
    }
  ];
  var quote = quotes[Math.floor(Math.random() * quotes.length)];

  document.getElementById("quote").innerHTML =
    '<p>' + quote.text + '</p>' +
    '<img class="img-circle" src="' + quote.img + '">';
})();

.img-circle{
  border-radius: 50%;
}

<div id="quote"></div>