<分区>
标签 css
<分区>
我需要一个带有渐变和 3px 描边的标题。我不在乎它是否与 png 一起使用。我需要跨浏览器。
代码:
.title {
text-align: center;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 40px;
font-size: 25px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
/*
This code gives me the gradient but only in Safari & Chrome. I need IE & Firefox to.
background: -webkit-gradient(linear, left top, left bottom, from(#ffcc02), to(#fffe42));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
}
我还需要添加一笔。但外面没有里面。或者如果它里面是我的新字体大小？
最佳答案
我以前回答过这种问题，check the post here .
There is an experimental webkit property called text-stroke in CSS3, I've been trying to get this to work for some time but have been unsuccessful so far.
What I have done instead is used the already supported text-shadow property (supported in Chrome, Firefox, Opera, and IE 9 I believe).
Use four shadows to simulate a stroked text:
HTML:
<div class="strokeme"> This text should have a stroke in some browsers </div>CSS:
.strokeme { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
关于css - 跨浏览器文本渐变和描边，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8470837/