如何为圆形图像添加 Google 一种样式的多色边框？

Question

我正在为我所在大学的 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>

如您所见，边框颜色未正确对齐。

有什么方法可以使用更简单的方法来完成此操作吗？

谢谢！

Answer 1

SVG 选项

要创建 multi-colored 个圆的扇区，请使用 stroke-dasharray

计算行和空格的长度：

为半径R = 100px周长=2 * 3.1415 * 100 = 628.3 px

为了得到等于四分之一圆的线，我们计算属性stroke-dasharray

628.3 / 4 = 157.075 Space 将是圆长度的 3/4 = 471px

但是由于蓝色、红色和绿色扇区的长度略大于四分之一圆，我们添加了这个差异。 stroke-dasharray = "183.255 445.045"

stroke-dashoffset = "78.54" 将扇区的起点移动圆周的 1/8

一个扇区的示例

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="250" height="250" viewBox="0 0 250 250" > 
   
<circle cx="125" cy="125" r="100" fill="none" stroke="#d3d3d3" stroke-width="8" />   
    
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 
 
 </svg>

我们还设置了其他颜色区域的属性。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="250" height="250" viewBox="0 0 250 250" >  

   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.255 425.045" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="78.54 549.76" stroke-dashoffset="340 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="525.225 " /> 
 
 </svg>

添加图像并使用蒙版剪切它以适合圆圈

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
      width="40%" height="40%" viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image xlink:href="https://i.stack.imgur.com/UsGg5.jpg" x="0" y="23" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
 </svg>

该解决方案是自适应的，在所有现代浏览器中都相同，包括 IE11、Edge

更新

OP没问，但也许这个补充对他或其他人有用。

SVG+CSS动画

为了给您的应用程序增添趣味，我添加了动画选项。

#1。笔划围绕图像旋转的动画

用组标签包裹形成彩色线条的所有圆圈 <g>
fill ="none" 替换为 fill ="transparent" 将鼠标悬停在整个圆上时动画开始工作

.student {
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#gr1 {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#gr1:hover {
  -webkit-transform: rotate(720deg);
          transform: rotate(720deg);
}

<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" /> 

<g id="gr1"> 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 </g>
 </svg> 
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
<g id="gr1">   
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
</g> 
 </svg>  
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
<g id="gr1">  
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
</g> 
   </svg>  
  </div> 
 </div>

2.#悬停时图片旋转动画

CSS规则用于实现图片的旋转

#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.student {

background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
 </svg> 
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
 </svg>  
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" /> 
   
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345 " /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2 " /> 
 
   </svg>  
  </div> 
 </div>

Answer 2

带掩码的微型 svg 解决方案

<svg viewbox="-5 -5 10 10" height="90vh">
  <defs>
    <mask id="mask1">
      <circle r="4.5" stroke="white" fill="black" stroke-width="0.5"></circle> 
    </mask>
    <mask id="mask2">
      <circle r="4"fill="white"></circle> 
    </mask>
  </defs>
  <g mask="url(#mask1)" transform="rotate(-45)">
    <rect width="7" height="7" fill="#fabb04" x="-7" y="-6"></rect>
    <rect width="7" height="7" fill="#34a852" x="-5" y="-1"></rect>
    <rect width="7" height="7" fill="#ea4335" x="-2" y="-5"></rect>
    <rect width="7" height="7" fill="#4285f4" x="0"  y="-1"></rect>
  </g>
  <image x="-4" y="-4" width="8" height="8" mask="url(#mask2)"
    xlink:href="https://i.stack.imgur.com/3q67w.gif"></image>
</svg>

如何为圆形图像添加 Google 一种样式的多色边框？

How do I add a Google One style multi-color border to a circular image?

css

photoshop

svg

adobe-illustrator

SVG 选项

SVG+CSS动画