0

我正在尝试用 an 剪辑路径，id="overlay-circle"但它似乎不起作用。这是我的html代码：

<html>
    <body>
        <svg>
            <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox">
                <polygon id="clipPoints" points="0.5, 2 3, 3 0.5" />
            </clipPath>
        </svg>
        <div id="letterWrapper">
            <div id="halo"></div>
            <div id="overlay-circle"></div>
            <div id="letter">
                <div id="letter-spotlight"></div>
            </div>
        </div>
    </body>
</html>

这是我的CSS：

#overlay-circle
{
    position: absolute;
    top: 35%;
    left: 39%;
    border-radius: 50%;
    height: 95px;
    width: 95px;
    background: -moz-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%);
    z-index: 2;
    clip-path: url(#clipPolygon);
}

我浏览了很多文章，但无法弄清楚我做错了什么。有任何想法吗？谢谢你。

4

1 回答 1

0

您的问题在于-moz-您用于线性渐变的前缀。如果您一直在 Chrome 中进行测试，您会看到一个空白屏幕。您需要扩展渐变属性支持：

background: -moz-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%);
background: -webkit-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%);
background: linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%);

结果：

在此处输入图像描述

于 2016-04-23T17:58:11.433 回答