草庐IT

html - 如何在类似圆的 div 上创建类似线性渐变的边框底部颜色(参见图像文件)

coder 2023-08-08 原文

我想创建一个圆形 div，其边框具有渐变效果，如下图所示。

我怎样才能做到这一点？

这是我卡住的地方:

.circle {
    background-color: #ffffff;
    text-align: ;
    width: 675px;
    height: 675px;
    border-radius: 50%;

    border-style: solid;
    border-width: 30px;
    border-left-color: #39c8e7;
    border-right-color: #39c8e7;
    border-bottom-color: // here I need linear gradient
    border-top-color:    // this need to be transparent
}

最佳答案

使用 SVG:

对于这样的形状，我会推荐 SVG，主要有两个原因 - (1) 使用 SVG 可以很容易地创建圆弧，这意味着顶部部分默认是透明的 (2) SVG 描边(边框)可以是分配了一个渐变。这意味着我们不需要用渐变填充圆弧/圆，然后在其上覆盖一个白色圆圈，这反过来意味着中心部分也可以是透明的。

创建两条弧线的 path 元素使用三 Angular 方程找出弧线的终点。因此，如果弧需要更长或更短，可以轻松修改它们。

使用的渐变与所提供的渐变大致相同，但可以通过进一步调整颜色停止点来实现更接近的相似度。

演示:

div {
  position: relative;
  height: 250px;
  width: 250px;
  border-radius: 50%;
}
svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
path {
  fill: transparent;
  stroke-width: 4;
}
#left-half {
  stroke: url(#left-border);
}
#right-half {
  stroke: url(#right-border);
}

/* just for demo */

body {
  background: radial-gradient(circle at center, aliceblue, steelblue);
  min-height: 100vh;
}
<div>
  <svg viewBox='0 0 104 104'>
    <linearGradient id='left-border' gradientUnits='objectBoundingBox' gradientTransform='rotate(50,0.5,0.5)'>
      <stop offset="0%" stop-color="rgb(71, 207, 215)" />
      <stop offset="100%" stop-color="rgb(113, 230, 178)" />
    </linearGradient>
    <linearGradient id='right-border' gradientUnits='objectBoundingBox' gradientTransform='rotate(310,0.5,0.5)'>
      <stop offset="0%" stop-color="rgb(217, 63, 177)" />
      <stop offset="100%" stop-color="rgb(217, 56, 111)" />
    </linearGradient>
    <path d='M52,102 A50,50 0 0,1 19.86,13.69' id='left-half' />
    <path d='M52,102 A50,50 0 0,0 84.14,13.69' id='right-half' />
  </svg>
</div>

输出屏幕截图:(添加背景以显示除边框外圆是透明的)

使用 CSS:

使用 CSS，您可以使用两个单独的 linear-gradient 背景图像(一个用于边框的左半部分，另一个用于边框的右半部分)，它们有一个 Angular ，然后用两个叠加它们白色圆圈(使用 radial-gradient 创建)创建与所提供的问题相同的效果。要使顶部透明，您可以将整个内容放在一个伪元素中，将其定位在父元素上方一点，然后使用父元素上的 overflow: hidden 剪裁顶部。

缺点是圆的中心部分需要是纯色(白色或其他颜色)。它不可能是透明的。我们可以使用 mask 图像来创建透明中心，但浏览器对它的支持非常低。到目前为止，它仅受支持 WebKit 的浏览器支持。

演示:

div {
  position: relative;
  height: 250px;
  width: 250px;
  overflow: hidden;
}
div:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0px;
  top: -20%;
  background: radial-gradient(circle at center, white 64%, transparent 65%), radial-gradient(circle at 50% -50%, white 50%, transparent 51%), linear-gradient(310deg, rgb(113, 230, 178), rgb(71, 207, 215)), linear-gradient(50deg, rgb(217, 63, 177), rgb(217, 56, 111));
  background-size: 100% 100%, 100% 100%, 50% 100%, 50% 100%;
  background-position: left top, left top, left top, right top;
  background-repeat: no-repeat;
  border-radius: 50%;
}
<div></div>

注意:其中一个径向渐变可以通过使用 vals 在他的回答中采用的相同方法来避免，但另一个(位于元素上方)无法避免，因为这种方法不对左右边框使用恒定的颜色。它试图模仿所讨论的图像，该图像在左侧和右侧也没有恒定的颜色。使用边框实现这样的效果将很困难。 (这并不是说其他​​答案不好/错误，只是这个答案不同)。

关于html - 如何在类似圆的 div 上创建类似线性渐变的边框底部颜色(参见图像文件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35091681/

何在htmlsectioncodestrongcsscss-shapeslinear-gradients

有关html - 如何在类似圆的 div 上创建类似线性渐变的边框底部颜色(参见图像文件)的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  7. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  8. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  9. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  10. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

随机推荐