Question

为什么我的clip-path价值似乎越来越偏移，直到我终于找出了罪魁祸首text-shadow的模糊值。

以下代码段应该很好地解释它：

.glow {
    text-shadow: 0px 0px 5px #00e;
}

.wrapper {
    background-color: #e00;
}

.clipped {
    background-color: #eee;
    border: 1px solid #000;
    width: 400px;
    height: 40px;
    /* +2 to clip point positions to account for 1px border */
    -webkit-clip-path: polygon(0px 42px, 402px 42px, 402px 0px, 0px 0px);
    clip-path: url("#clipPath");
}

<div class="wrapper">
    <div class="clipped">
        <span class="glow">glowing text</span> and not glowing text
        <br />
        more not glowing text
    </div>
</div>
<hr>
<div class="wrapper">
    <div class="clipped">
        no glowing text at all here
        <br />
        but otherwise the same as the first div
    </div>
</div>

<svg width="0" height="0">
    <clipPath id="clipPath">
        <polygon points="0 42,402 42,402 0,0 0">
        </polygon>
    </clipPath>
</svg>

为什么text-shadow会干扰剪切路径的行为？有没有办法绕过它？ text-shadow是否还有其他我应该知道的奇怪差异？

为什么text-shadow偏移剪辑路径？

0 个答案: