Question

我正在尝试重叠两个字体项，仅使用HTML / CSS创建双色调效果。如果我想制作顶部的一种颜色而另一种颜色是底部的话，我可以相当容易地实现这一目标。我真正想要做的是使字体（图标）的外部为一种颜色而另一种颜色为内部。

以下是用于创建顶部/底部拆分的HTML（包括fontawesome.io）：

<div>
    <span><i class="icon-li icon-bar-chart"></i></span>
    <i class="icon-li icon-bar-chart"></i>
</div>

这是我的CSS：

div {
    left: 8px;
    position: relative;  
    color: #404040;
    font-size: 60px;
}

div span {
    height: 50%;
    position: absolute;
    color: #6DCAEC;
    overflow: hidden;  
}

在Fiddle

中

这就是我想要的样子：

Goal

最后要注意的是，我只需要CSS与web-kit兼容。感谢您提供的任何帮助！

Answer 1

这是简单的形状，因此您可以使用:: after

创建“轮廓”

.icon-li::after {
    content: ' ';
    border: 5px solid #6DCAEC;
    position: absolute;
    top: .1em;
    left: 0em;
    height: .71em;
    width: .91em;
    border-radius: 5px;
}

jsfiddle

Answer 2

你可以尝试而不是使用带有SVG图标的字体..使用2 x SVG路径..或1 X SVG多路径..然后你可以为路径添加1种颜色，为第二种路径添加不同的颜色

在这里查看教程：http://css-tricks.com/using-svg/

示例：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
     xml:space="preserve">

<ellipse fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80"/> // first shape 

<path id="bird" d="M210.333,65.331C104.367,66.105-12.349,150."/> // second shape 

</svg>

CSS单个字体上的两种不同颜色（内部和外部）

2 个答案: