主页 / 问题 / 682321
Accepted
word
Asked:2020-06-22 15:16:22 +0000 UTC2020-06-22 15:16:22 +0000 UTC

带渐变的圆圈

  • 772

如何创建如图所示的圆圈？
图片中也有背景。你可以画一个带有渐变的圆，然后使用 :before 来关闭周边的内部，但是如何使用 :before 来显示背景呢？
在此处输入图像描述

css

5 个回答

  1. Best Answer

    使用由生成器生成的@Maxim Lensky 的答案示例，可以制作一个可读易懂的版本：

    <svg viewBox="0 0 220 220" width="220" height="220">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0" style="stop-color:#0070d8" />
            <stop offset="0.5" style="stop-color:#2cdbf1" />
            <stop offset="1" style="stop-color:#83eb8a" />
        </linearGradient>
    </defs>
    <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
</svg>

    • 8

  2. 或者，您可以使用mask-image：

    .box {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #0B73D3, #37DAEF, #86E98E);
  -webkit-mask-image: radial-gradient(circle at center, transparent 67%, white 68%);
  mask-image: radial-gradient(circle at center, transparent 67%, white 68%);
}

body {
  background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
  background-size: cover;
}
    <div class="box"></div>

    但是，不幸的是，浏览器支持还有很多不足之处。

    • 6

  3. 像往常一样，svg 处理这些事情，我建议阅读这个 charm，有一个优秀的网站，其管理员属于 ruSO

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  id="svg8" version="1.1" viewBox="0 0 297 210">
  <defs
     id="defs2">
    <linearGradient
       id="linearGradient853-5-9-6">
      <stop
         id="stop849"
         offset="0"
         style="stop-color:#489c37;stop-opacity:1" />
      <stop
         id="stop851"
         offset="1"
         style="stop-color:#2a3eff;stop-opacity:0.733" />
    </linearGradient>
    <linearGradient
       gradientUnits="userSpaceOnUse"
       y2="194.94643"
       x2="171.57741"
       y1="193.43452"
       x1="136.8512"
       id="linearGradient885"
       xlink:href="#linearGradient853-5-9-6" />
  </defs>
  <g
     transform="translate(0,-87)"
     id="layer1">
    <ellipse
       ry="78.619049"
       rx="88.824409"
       cy="195.70238"
       cx="151.56847"
       id="path10"
       style="fill:none;fill-opacity:1;stroke:url(#linearGradient885);stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
  </g>
</svg>

    • 2

  4. 您可以在没有 SVG 的情况下使用纯 CSS 来完成，但是您必须明确设置图像的背景颜色：

    div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  /* Явно задаём белый цвет */
  background-color: white;
}

div:after {
  content: "";
  background: linear-gradient(#0070d8, #2cdbf1, #83eb8a);
  position: absolute;
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border-radius: 50%;
  z-index: -1;
}
    <div></div>

    • 1

  5. 您可以使用@ArtemGorlachev的答案并稍微修改它以适应任意块：

    <svg viewBox="0 0 220 220"  width="100%" height="100%" preserveAspectRatio="none">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0" style="stop-color:#0070d8" />
            <stop offset="0.5" style="stop-color:#2cdbf1" />
            <stop offset="1" style="stop-color:#83eb8a" />
        </linearGradient>
    </defs>
    <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
</svg>

    您可以使 SVG 独立（首选）或作为值的一部分background（以下代码仅适用于 webkit 浏览器）：

    div {
  width: 250px;
  height: 250px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" preserveAspectRatio="none"><defs><linearGradient id="gradient"><stop offset="0" style="stop-color:#0070d8" /><stop offset="0.5" style="stop-color:#2cdbf1" /><stop offset="1" style="stop-color:#83eb8a" /></linearGradient></defs><ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /></svg>');
}
    <div></div>

    为了使代码在 MS Edge 和 Firefox 中工作，url 中的字符必须在 utf8 编码后转义，对于他们来说，考虑到解决方法（用单引号替换双引号，#with%23和%with %25）的结果看起来像这个：

    div {
  width: 250px;
  height: 250px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' width='100%25' height='100%25' preserveAspectRatio='none'><defs><linearGradient id='gradient'><stop offset='0' style='stop-color:%230070d8' /><stop offset='0.5' style='stop-color:%232cdbf1' /><stop offset='1' style='stop-color:%2383eb8a' /></linearGradient></defs><ellipse ry='100' rx='100' cy='110' cx='110' style='fill:none;stroke:url(%23gradient);stroke-width:6;' /></svg>");
  background-size: 100% 100%; /* Фикс для Firefox, чтобы изображение корректно растягивалось */
}
    <div></div>

    • 1

相关问题