【发布时间】：2019-11-12 07:48:09
【问题描述】：
我正在为我所在大学的 Google DSC 俱乐部创建一个网站，我想在网站上的圆形作品集图片中添加 Google One style border。
我想知道如何使用 CSS 来实现这一点，但预渲染的 Photoshop 或 Illustrator 技巧也可以。
我尝试修改this answer中给出的一些代码，但无法达到完美的效果。
.test {
margin: 25px 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 12px solid transparent;
background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
background-repeat: no-repeat;
background-image: linear-gradient(white, white),
linear-gradient(30deg, #ea4335 36%, #4285f4 30%),
linear-gradient(120deg, #4285f4 36%, #34a853 30%),
linear-gradient(300deg, #fbbc04 36%, #ea4335 30%),
linear-gradient(210deg, #34a853 36%, #fbbc04 30%);
background-position: center center, left top, right top, left bottom, right bottom;
background-origin: content-box, border-box, border-box, border-box, border-box;
background-clip: content-box, border-box, border-box, border-box, border-box;
transform: rotate(90deg);
}<div class="test"></div>如您所见，边框颜色未正确对齐。
有什么方法可以使用更简单的方法来完成此任务吗？
谢谢！
【问题讨论】：
-
你的意思是他们没有正确对齐？你能显示一张图片吗？从sn-p看起来不错
-
嘿 Waldir，我的意思是我在帖子中链接的原始 Google One 边框没有正确对齐。边框的颜色与 Google 'G' 徽标中的颜色一致。红色和蓝色大，绿色中等，黄色最小。但每当我尝试改变颜色的角度或长度时，它就会变得一团糟。我真的不想这么具体，但现在我已经向团队提出了建议，他们想要这样。
-
是的，就是这样。非常感谢！
标签： css svg photoshop adobe-illustrator