简单地说，我需要在具有透明背景的动态大小的圆圈上放置渐变。有没有办法在CSS/HTML 中重新创建以下图像？
据我所知，径向渐变和边框图像都无法构建这种形状。关键是圆的中心需要是透明的，因为我不能通过用白色填充中心来“伪造”圆环。
更新：这种效果在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 的浏览器（afaik），但希望将 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>【讨论】：