相关疑难解决方法(0)

我正在开发一个需要使用CSS3 box-shadow属性的项目.这没关系,但我发现阴影的扩散大小不能设置为父对象的百分比.

我完全理解box-shadow不是附加的,因此它不会将parent的大小作为参考.

但考虑到我需要具有完全响应的站点,其中对象流畅地缩放(不仅在断点处),这会产生问题 - 我只能以绝对单位(em或px)设置阴影扩展属性.

这有什么解决方案吗？我想过在容器内使用内部容器(用于内容)(对于"阴影" - 它没有模糊),但这会产生另一个问题 - 内部容器的垂直居中.

有解决方案吗 请不要jQuery,只是纯CSS.

谢谢

这是我的代码,但这不是我想要的.我希望颜色分布不对称.

<svg width="300" height="300">
    <linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
       <stop offset="5%" stop-color="#01E400"></stop>
       <stop offset="25%" stop-color="#FEFF01"></stop>
       <stop offset="40%" stop-color="#FF7E00"></stop>
       <stop offset="60%" stop-color="#FB0300"></stop>
       <stop offset="80%" stop-color="#9B004A"></stop>
       <stop offset="100%" stop-color="#7D0022"></stop>
    </linearGradient>
   <circle r="120" cx="150" cy="150" class="external-circle" stroke-width="4" fill="none" stroke="url(#linearColors)"></circle>
</svg>

我需要这样的效果.