HTML颜色渐变效果

1、线性渐变
创建一个线性渐变需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，还要定
义终止色，终止色是平滑过渡后的颜色。

2、径向渐变
CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有
方向混合。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变效果</title><style>div{width: 100px;height: 200px;float: left;margin-left: 10px;   }/* 线性渐变 */.b1{/* 颜色渐变方向，渐变的角度 起始颜色 结束颜色 */background: linear-gradient(to bottom, red, green);}.b2{background: linear-gradient(to top, orange, yellow);}.b3{background: linear-gradient(90deg, blue, pink);}.b4{background: linear-gradient(45deg, rgb(255, 21, 216), rgb(0, 238, 255));}/* 径向渐变 */.b5{/* 圆：circle */background: radial-gradient(circle,red, green);}.b6{/* 椭圆：ellipse */background: radial-gradient(ellipse, red, green);}.b7{/* 60% 70% =》左右 上下 */background: radial-gradient(100% 30%,red, green);}.b8{/* 前缀：‘-webkit-’谷歌； ‘-moz-’火狐； ‘-o-（opera）’浏览器； 注意：使用渐变大小时，注意需要加前缀生效*/background: -webkit-radial-gradient(farthest-side,  rgb(255, 21, 216), rgb(0, 238, 255),  blue, pink);}</style>
</head>
<body><!-- 线性渐变 --><div class="b1">to bottom</div><div class="b2">to top</div><div class="b3">90度</div><div class="b4">45度</div><!-- 径向渐变 --><div class="b5">1</div><div class="b6">2</div><div class="b7">3</div><div class="b8">4</div>
</body>
</html>

效果图如下：

HTML颜色渐变效果相关推荐

html5做文字颜色渐变代码,神奇！js+CSS+DIV实现文字颜色渐变效果_javascript技巧
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下下面是 CSS 部分代码: body{ font:12px/1.5 Microsoft Yahei;}h3{ ...
Android 字体颜色渐变效果 Span实现
Android 实现字体颜色渐变效果废话留在后面直接上代码 public class LinearGradientFontSpan extends ReplacementSpan {private ...
在VC中用GDI+绘制角度可变的颜色渐变效果-.NET教程,VB.Net语言[转]
在VC中用GDI+绘制角度可变的颜色渐变效果-.NET教程,VB.Net语言作者:网友供稿点击:4 gdi+ 是gdi(windows 早期版本提供的图形设备接口)的后续版本,是microsoft ...
JS获取颜色渐变效果数组
JS获取颜色渐变效果数组 function rgbToHex(r,g,b){var hex = ((r << b) | (g << 8) | b).toString(16)re ...
java按钮鼠标经过渐变_JavaScript实现的鼠标响应颜色渐变效果完整实例
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: /p> "http://www.w3.org/TR/x ...
NGUI之UILabel颜色渐变效果
1. UILabel简介 (1)UILabel支持类型 a.图字:是指根据某些工具,将游戏中需要用到的文字渲染到一张纹理上,并附其纹理信息(包括 id值,尺寸,间距等). b.字库字:是指直接载入tt ...
CSS：实现动态流光线条效果/动态流光线条颜色渐变效果
需求描述: 需要实现类似下图中的动态流光线条效果: 思路: 提到这种动态绘制矢量图形的需求,一般会想到使用canvas:由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实 ...
eCharts实现颜色渐变效果环形图
之前我尝试了Element-ui的环形进度条实现颜色渐变效果这个对eCharts来说简直就是小case. 完成之后的效果图如下: 对应的页面源代码如下: <template><di ...
android 渐变的背景色,Android开发——实现背景颜色渐变效果-Go语言中文社区
前言在Android开发当中,我们肯定会接到有业务需求是:让APP的某一些背景颜色产生渐变效果.那我们应该怎么去实现呢?接下就是我要为大家介绍的了. 效果图这是需求要达到的效果.接下来说一下是怎么 ...
jquery html渐变效果,jQuery实现字体颜色渐变效果的方法
本文实例讲述了jQuery实现字体颜色渐变效果的方法.分享给大家供大家参考,具体如下: jQuery不允许css属性值为非数字的属性进行动画处理, 比如.animate(color:'red',500 ...

HTML颜色渐变效果

HTML颜色渐变效果相关推荐

最新文章

热门文章