如何漸變背景適用於HTML CSS圓圈DIV

Question

我怎樣才能使HTML一個div和圖片應用漸變背景，如：

我已經嘗試了一些JS-小提琴片段但無法在圖像中做這樣的事情，它將在定價表中用於顯示最新的折扣。我的另一個替代方案是在我的定價表中使用硬引用圖片。

http://www.hongkiat.com/blog/css-gradient-border/

我嘗試了上面的鏈接和應用border-radius:50%但沒有得到期望的結果。

Answer 1

邊框圖像還沒有很好的支持，所以我認爲你需要使用兩個集裝箱，一個被風格化與background: linear-gradient()：

https://jsfiddle.net/nsvn00px/

<div class="circle"> 
    <div class="circle__inner"></div> 
</div> 

CSS：

.circle { 
    position: relative; 
    width: 50px; height: 50px; 
    border-radius: 50%; 
    background: linear-gradient(to right, red, green); 
} 
.circle__inner { 
    position: absolute; 
    width: 46px; height: 46px; 
    top: 2px; left: 2px; 
    border-radius: 50%; 
    background-color: white; 
} 

這也可以使用僞類在一個容器內完成，但我認爲這應該讓你更好地瞭解它是如何工作的。