如何添加設置的邊界半徑？

我在環顧網絡，看到有關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

如何添加設置的邊界半徑？

回答

相關問題