Question

我需要获得一个渐变和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;*/
}

另外我需要添加一个笔画。但外面没有内心。或者如果它的内部将是我的新字体大小？

Answer 1

我之前已回答过这类问题，check the post here。

在CSS3中有一个名为text-stroke的实验性webkit属性，   我一直试图让它工作一段时间，但一直都是   到目前为止都没有成功。

我所做的是使用已经支持的文本阴影   属性（我相信Chrome，Firefox，Opera和IE 9支持）。

使用四个阴影来模拟描边文字：

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;
}

跨浏览器文本渐变＆amp;行程

1 个答案: