Css文本阴影与剪辑 [英] Css text shadow with clip

问题描述

我真的很喜欢带有插入阴影的文字效果，但是由于传播，它也溢出了每个角色的边界。有没有办法让阴影只在每个角色的内部？

Hi,

I really like this text effect with an inset shadow, however because of the spread, it's also overflowing past the boundaries of each character. Is there any way to cause the shadow to just be on the inside of each character?

#text
{
        font: bold 64px 'Open Sans';
        color: transparent;
        background-color: black;
        text-shadow: 0px 0px 20px rgba(255,255,255,0.5);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
}

预览：此处 [ ^ ]



我的尝试：



添加另一个与背景颜色相同的阴影，没有任何效果

Preview: here[^]

What I have tried:

Adding another shadow the same colour as the background, didn't have any effect

推荐答案

 13
down vote
favorite
3
	

I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?

h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}

这篇关于Css文本阴影与剪辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！