簡而言之，我需要在具有透明背景的動態大小的圓上放置漸變。有沒有辦法在CSS/HTML中重新創建以下圖像？在HTML/CSS中創建漸變圓環
據我所知，無論是徑向漸變還是邊界圖像都無法構造這種形狀。關鍵是圓的中心需要是透明的，因爲我不能通過用白色填充中心來「僞造」圓環。
更新：此效果是SVG很容易實現的，但我想知道的HTML/CSS只有這樣，才能實現這一目標。看到這個例子：http://codepen.io/MaxXiong/pen/rOGzgR
只使用CSS，我相信你是有限的（如果你不想在CSS中使用任何SVG）。
在分辨率方面不可擴展的可行解決方案是通過像這樣的PNG創建一個簡單的遮罩。
透明部分是將來自元件的邊界框被去除的區域。
外圈可以通過border-radius: 50%平凡地創建。
body {
background-color: #d5d5d5;
}
.torus {
width: 312px;
height: 312px;
/* creates outer circle */
border-radius: 50%;
/* masks the inner circle */
-webkit-mask: url(http://i.imgur.com/pFLUTns.png) no-repeat;
mask: url(http://i.imgur.com/pFLUTns.png) no-repeat;
/* gradient background */
background: #00601b;
background: -moz-linear-gradient(top, #00601b 0%, #e10019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00601b), color-stop(100%,#e10019));
background: -webkit-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -o-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -ms-linear-gradient(top, #00601b 0%,#e10019 100%);
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00601b', endColorstr='#e10019',GradientType=0);
}<div class="torus"></div>您可以使用radial-gradient()動態創建，我原本有PNG手動完成剪輯路徑。目前僅支持webkit。
除了瀏覽器支持，唯一稍微不滿意的結果是內圈上沒有鋸齒。您可以將這些值混淆在一起，最後創建一個±1％的內插值，但我個人認爲硬切斷看起來更好。但是，嘿，這是非常直接的，尊重集裝箱的規模！
body {
background-color: #d5d5d5;
}
.torus {
width: 312px;
height: 312px;
/* create the outer circle */
border-radius: 50%;
/* use a radial gradient to create the inner circle mask */
/* tweak 60% for the desired radius of the gradient */
-webkit-mask: radial-gradient(ellipse at center,
rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%
);
mask: radial-gradient(ellipse at center,
rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%,
rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%
)
/* gradient background */
background: #00601b;
background: -moz-linear-gradient(top, #00601b 0%, #e10019 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00601b), color-stop(100%,#e10019));
background: -webkit-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -o-linear-gradient(top, #00601b 0%,#e10019 100%);
background: -ms-linear-gradient(top, #00601b 0%,#e10019 100%);
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00601b', endColorstr='#e10019',GradientType=0);
}<div class="torus"></div>的更新問題沒有完美的解決方案（CSS嵌入禁止SVG），目前工作在基於Firefox瀏覽器只（據我所知），但希望把CSS clip-path進入討論：
div {
height:100px;
width:100px;
background-image: linear-gradient(to bottom, #393, #933);
clip-path: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="M 50 10 A 25 25 0 0 0 50 90 A 25 25 0 0 0 50 10 M 50 0 A 50 50 0 0 1 50 100 A 50 50 0 0 1 50 0" /></clipPath></defs></svg>#a');
}
body {
background-image: linear-gradient(to right, #333, #666, #333);
background-size: 33px 10px;
}<div>使用unicode圈並設置漸變字體顏色。
http://jsfiddle.net/agvbqvmn/1/
.bg {
width: 200px;
height: 200px;
background-color: #eee;
}
.torus:after {
content: '\020dd';
display: block;
font-size: 72px;
line-height: 102px;
background: linear-gradient(to bottom, #00601b 0%,#e10019 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<div class="bg">
<div class="torus"></div>
</div>非常有創意！不幸的是我需要能夠調整邊框的厚度。 – mxiong
只是爲了澄清，你是否願意引用CSS的SVG路徑？ –
我很好奇是否有純粹的CSS解決方案。如果我們將SVG帶入方程中，我可以直接使用示例 – mxiong