草庐IT

css设置渐变色

人鱼小姐ww 2023-04-20 原文

css如何设置自定义渐变色？线性渐变篇

CSS渐变可以让你在两个或多个指定颜色之间显示平滑的过渡

CSS定义了三种渐变类型:

  • Linear Gradients (goes down/up/left/right/diagonally) 下降/ 上升/左/右/对角线
  • Radial Gradients (defined by their center) 由中心定义
  • Conic Gradients (rotated around a center point) 绕一个中心点旋转

CSS线性渐变 (Linear Gradients)

要创建线性渐变，您必须定义至少两个颜色停止。颜色停止是您想要渲染之间平滑过渡的颜色。您还可以设置一个起点和方向(或角度)以及梯度效果。

语法:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction - Top to Bottom (这是默认,从上到下)

下面的例子显示了一个从顶部开始的线性渐变。开始是红色，然后变成黄色:

#grad {
  background-image: linear-gradient(red, yellow);
}

Direction - Left to Right (从左到右)

下面的例子显示了一个从左侧开始的线性渐变。开始是红色，然后变成黄色:

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Direction - Diagonal （对角线）

您可以通过指定水平和垂直的起始位置来创建斜角渐变。
下面的示例显示了从左上角开始(到右下角)的线性渐变。开始是红色，然后变成黄色:

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

如果你想对渐变的方向有更多的控制，你可以定义一个角度，而不是预定义的方向(向下，上，向右，向左，向右，等等)。0度的值相当于“to top”。90度的值相当于“向右”。180度的值相当于“到底”。

语法:

background-image: linear-gradient(angle, color-stop1, color-stop2);

下面的例子展示了如何在线性渐变中使用角度:

#grad {
 background-image: linear-gradient(180deg, red, yellow);
}

使用多种颜色的stop

下面的例子显示了一个线性渐变(从上到下)与多个颜色停止:

#grad {
  background-image: linear-gradient(red, yellow, green);
}

下面的例子展示了如何创建一个线性渐变(从左到右)，颜色为彩虹和一些文本:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

使用透明

CSS渐变也支持透明度，可以用来创建渐隐效果。
为了增加透明度，我们使用rgba()函数来定义颜色停止。rgba()函数中的最后一个参数可以是0到1之间的值，它定义了颜色的透明度:0表示完全透明，1表示完全透明(不透明)。
下面的例子显示了一个从左侧开始的线性渐变。它开始完全透明，过渡到全红色:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

重复一个线性渐变

repeat -linear-gradient()函数用于重复线性梯度，

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
变色cssspanpunctuationclass前端

有关css设置渐变色的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  5. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  6. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器，但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型，并且只返回text/plain，如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  7. ruby-on-rails - 有没有办法为 CarrierWave/Fog 设置上传进度指示器？ - 2

    我在Rails应用程序中使用CarrierWave/Fog将视频上传到AmazonS3。有没有办法判断上传的进度，让我可以显示上传进度如何？ 最佳答案 CarrierWave和Fog本身没有这种功能；你需要一个前端uploader来显示进度。当我不得不解决这个问题时，我使用了jQueryfileupload因为我的堆栈中已经有jQuery。甚至还有apostonCarrierWaveintegration因此您只需按照那里的说明操作即可获得适用于您的应用的进度条。 关于ruby-on-r

  8. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  9. objective-c - 在设置 Cocoa Pods 和安装 Ruby 更新时出错 - 2

    我正在尝试为我的iOS应用程序设置cocoapods但是当我执行命令时:sudogemupdate--system我收到错误消息:当前已安装最新版本。中止。当我进入cocoapods的下一步时:sudogeminstallcocoapods我在MacOS10.8.5上遇到错误:ERROR:Errorinstallingcocoapods:cocoapods-trunkrequiresRubyversion>=2.0.0.我在MacOS10.9.4上尝试了同样的操作，但出现错误:ERROR:Couldnotfindavalidgem'cocoapods'(>=0),hereiswhy:U

  10. ruby - 将对象设置为 nil 是否很常见？ - 2

    我正在构建一个应用程序，想知道是否将未使用的对象设置为nil是生产级编码中的常见做法。我知道这只是垃圾收集器的提示，并不总是处理对象。 最佳答案 根据这个thread如果您使用完一个成员对象，将其设置为nil将引发被引用对象被垃圾回收。如果它是局部变量，方法exit将做同样的事情。也就是说，如果您要求将成员显式设置为nil，我会质疑您的设计。 关于ruby-将对象设置为nil是否很常见？，我们在StackOverflow上找到一个类似的问题： https://

随机推荐