简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

css3中颜色线性渐变色彩的实现代码

不言
发布： 2018-08-20 11:48:05
原创
2176 人浏览过

本篇文章给大家带来的内容是关于css3中颜色线性渐变色彩的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css3 Gradient分为线性渐变（linear）和径向渐变（radial）。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

线性渐变语法：

linear-gradient(to bottom,#FFF,#999)
登录后复制

参数：第一个参数指定渐变方向，可以用角度或英文来表示：
这里写图片描述

第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
登录后复制

实例代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Gradient</title>
 <style type="text/css">
 p {
   width: 400px;  
   height: 150px;  
   line-height: 150px;  
   text-align:center;  
   color: #000;  
   font-size:24px;  
   background-image:linear-gradient(to top left,yellow,blue);
   }
 </style>
 </head>
  <body>　　<p>右下角向左上角的线性渐变背景</p>
  </body>
  </html>
登录后复制

效果如下：

2345截图20180820114226.png

相关推荐：

【CSS3】-颜色RGBA及渐变色_html/css_WEB-ITnose

CSS3中颜色线性渐变实战_html/css_WEB-ITnose

以上是css3中颜色线性渐变色彩的实现代码的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
CSS3中颜色渐变色彩
来源：php.cn
上一篇：css3中background-orgin的使用方法（附代码） 下一篇：css中过渡（transition）的属性与实现方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
焦点不起作用时从显示隐藏更改为显示块 我试图让我的“searchbardropdown”在单击“searchbarinput”时显示，但这不起作用。有谁知道这是怎么回事？谢谢！在图中，您可以看到当输入获得焦点时背景颜色...
来自于 2024-04-04 14:24:47
0
1
371
Ag-Grid：是否可以在计时器上设置行的样式，而不是基于行中的数据？ 我需要在一段时间后更改行的背景颜色。网格中有一列的时间以秒为单位，我需要在该时间过去50%后更改行颜色。网格中的数据本身并没有改变，因此使用rowClassRules似乎不起作用，...
来自于 2024-04-03 20:14:05
0
1
360
如何判断鼠标是否停止悬停在一个元素上？ 我想知道鼠标如何停止悬停在javascript或使用css中的元素上。我正在制作一个动画，当鼠标悬停在背景上时，背景会改变颜色，并且我还想在鼠标停止悬停在元素上时添加动画。我怎样才...
来自于 2024-03-31 13:28:28
0
1
272
可能的问题：将'background-color”与'DT”一起使用时出现意外结果 自版本v0.26起，Rshiny中使用的DT包的background-color已更改。这对你和我的问题来说是一样的吗？改变背景颜色不再起作用是一个错误吗？！library(shi...
来自于 2024-03-30 09:30:22
0
1
395
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！