如何添加设置的边界半径？

我在环顾网络，看到有关img和报价的帖子，每次页面刷新时都会发生变化，而且这是在堆栈溢出这里是代码，信贷发给原始开发者，但我只是想知道在哪里可以添加类IMG圈，以便它在CSS工作，以对图像中的圆形边框，对不起，这是我在＃2的第一篇文章如何添加设置的边界半径？

(function() { 
    var quotes = [ 
    { 
     text: "text1", 
     img: "http://i.stack.imgur.com/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 + '">'; 
})();

来源

2016-11-29 Ryo Le

只是将它加入到img代码：

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

全码：

(function() { 
    var quotes = [ 
    { 
     text: "text1", 
     img: "http://i.stack.imgur.com/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: "http://i.stack.imgur.com/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>

来源

2016-11-29 18:56:54

添加样式属性与一组边界半径img标签内。

'<img src="' + quote.img + '" style="border-radius: 100%;">';

来源

2016-11-29 19:03:11

在你的HTML标签本身添加类名称，如class="circle-image"

(function() { 
 
    var quotes = [ 
 
    { 
 
     text: "text1", 
 
     img: "http://i.stack.imgur.com/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 + '" class="circle-image">'; 
 
})();

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

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

来源

2016-11-29 19:09:17 jafarbtech

如何添加设置的边界半径？

回答

相关问题