我为 Fontawesome 图标定义了一些样式，将浏览器图标着色为相应的品牌颜色。所以 Opera 图标是红色的，IE 图标是蓝色的，Firefox 图标是橙色的。
但由于 Chrome 有 4 种不同的颜色，而且分离得非常严格，我想知道是否有可能仅使用 CSS 来模仿类似的颜色？
我知道最接近的方法是渐变，但显然它看起来不太正确。
i.fa-chrome {
font-size: 3rem;
background-image: linear-gradient(to bottom right, yellow, limegreen, crimson, blue, blue);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="p-3">
<i class="fa fab fa-chrome"></i>
</div>
是否可以通过一些背景剪辑和 CSS hacking 来完成更多操作，以更接近原始图标的视觉标识？
有了多个背景，你就可以做到这一点，但正如我在这个之前的答案它仍然特定于这个特定的图标：
.fa-chrome {
font-size: 3rem;
background:
linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0% /37% 30%,
linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
linear-gradient( 47deg, #34a853 42%,transparent 43%),
linear-gradient(-72deg, #fbbc05 42%,transparent 43%),
linear-gradient(-199deg, #ea4335 42%,transparent 43%);
background-repeat:no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<i class="fab fa-chrome fa-8x"></i>
<i class="fab fa-chrome fa-5x"></i>
<i class="fab fa-chrome fa-3x"></i>
与 Font Awesome V4 相同的代码
.fa-chrome {
background:
linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0% /37% 30%,
linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
linear-gradient( 47deg, #34a853 42%,transparent 43%),
linear-gradient(-72deg, #fbbc05 42%,transparent 43%),
linear-gradient(-199deg, #ea4335 42%,transparent 43%);
background-repeat:no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-chrome fa-5x"></i>
<i class="fa fa-chrome fa-4x"></i>
<i class="fa fa-chrome fa-2x"></i>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
