ボーダー半径を設定するにはどうすればいいですか？

Question

私はウェブを見ていて、ページがリフレッシュされ、スタックオーバーフローが発生するたびに変更するimgと見積もりに関する投稿を見ました。 ここのコードは元の開発者には向いていますが、それはイメージのため、円形の境界線を持つようにCSSで動作しますように、私はクラスIMG-円を追加することができる場所を知りたい、申し訳ありませんstackoverflowの

(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 + '">'; 
})(); 

Answer 1

で、この私の最初の投稿ですが、ちょうどそれを追加〜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>

Answer 2

セットボーダー半径とimgタグ内のスタイル属性を追加します。

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

Answer 3

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>

のようなあなたのhtmlタグ自体にクラス名を追加します