CSS 文字渐变，背景渐变的几种实现方式

在我们日常页面开发当中，使用合适的css渐变效果能让我们的界面更加美观，赏心悦目。

一、CSS 文字渐变：

首先，文字渐变实际上是通过背景渐变裁剪成文字的前景色，然后使文字填充颜色变透明显示背景颜色实现文字渐变。（简单来说就是裁剪透明文字使我们看的后面的背景色）。所以只要我们学习好背景颜色的实现方式，就能实现大部分文字渐变效果。

CSS 代码：

background-image: linear-gradient(to top, #00C6FF, #8AFFD2); /* 线性渐变背景，方向向上 */
-webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
-webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */

效果图：

二、CSS 背景渐变：这是我们着重讲解的部分。

背景渐变方式一般分为线性渐变、径向渐变和重复渐变（也分为线性、径向）这几类。

CSS 代码：

  /* 线性渐变背景，方向向上 */background-image: linear-gradient(to top, #00C6FF, #8AFFD2);/* 径向渐变背景，中心为圆心 */background-image: radial-gradient(#00C6FF, #8AFFD2);/* 重复渐变-线性，向上重复 */background-image: repeating-linear-gradient(to top,#00C6FF, #00C6FF 5px, #8AFFD2 5px, #8AFFD2 10px);/* 重复渐变-径向，中心为圆心 */background-image: repeating-radial-gradient(#00C6FF, #00C6FF 5px, #8AFFD2 5px, #8AFFD2 10px);

效果图：

（1）线性渐变：

线性渐变参数包括渐变的方向、色值、颜色起止范围。通过这些参数，我们可以设置一些很有特色的前端CSS效果。

CSS 代码：

  /* 方块一 */background-image: linear-gradient( 45deg,#00C6FF, #8AFFD2);/* 方块二 */background-image: linear-gradient(to top left, #00C6FF 50%, #8AFFD2 50%);/* 方块三 */background-image: linear-gradient( to top,rgba(0 ,198,255,0), rgba(0 ,198,255,0.5),rgba(0 ,198,255,0));/* 方块四 */background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

效果图：

（2）径向渐变：

径向渐变参数包括渐变的圆心（farthest-corner 可指定中心点所在位置，默认中心为圆心）、色值、颜色起止范围。

CSS 代码：

  /* 方块一 */background-image: radial-gradient(#00C6FF 50%, #8AFFD2 50%);/* 方块二 */border-radius: 50%;background-image: radial-gradient(#00C6FF 20%, #8AFFD2 40%,#00C6FF 80%, #8AFFD2 100%);/* 方块三 */background-image: radial-gradient(farthest-corner at 0px 0px, #00C6FF 0%, #8AFFD2 100%);/* 方块四 */background-image: radial-gradient(red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);

效果图：

（3）重复渐变：

重复渐变的线性和径向跟前面线性渐变和径向渐变参数类似，这里就不多赘述。

CSS 代码：

  /* 方块一 线性 */background-image: repeating-linear-gradient(45deg, #8AFFD2, #00C6FF 33.3%);/* 方块二 线性 */background-image: repeating-linear-gradient(to top left, red , orange , lightgreen , blue 10px);/* 方块三 径向 */background-image: repeating-radial-gradient(circle at center, #00C6FF, rgba(0,198,255,0.5) 20px);/* 方块四 径向 */background-image: repeating-radial-gradient(farthest-corner at 0px 0px, lightgreen , #00C6FF, #8AFFD2 20px);

效果图：

总结：

基本了解了这些渐变方式，我们就能实现一些规则的前端CSS效果。结合下文字渐变方式，我们可以得到下面有趣的文字渐变样式。

是不，感觉简简单单的文字也高端大气上档次了呢！

【CSS 文字渐变、背景渐变实现方式】相关推荐

css实现透明背景渐变 linear-gradient
css实现透明背景渐变 linear-gradient // html <div class="curtain"></div> // css .curtai ...
php背景渐变颜色代码,CSS实现网页背景渐变的四种代码设置
这篇文章主要介绍了关于CSS实现网页背景渐变的四种代码设置,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下一.从上往下渐变body{ FILTER: progid:DXImageTra ...
【css】渐变-背景渐变、边框渐变、文字渐变
渐变 ● 线性渐变(向下/向上/向左/向右/对角线) ● 径向渐变(由其中心定义) 线性渐变 background-image: linear-gradient(direction, color-st ...
CSS文字颜色动态渐变
效果: <div class="text" > 热销中 </div> 样式修改 .text {position: absolute;top: 5px;lef ...
css背景渐变的技巧与方法
[发帖际遇]: the_truth玩宠物的时候不幸损失威望13. css背景渐变的技巧与方法用css实现网页背景渐变的代码如下: 一.从上往下渐变 Example Source Code: body ...
CSS -- CSS字体样式、文本样式、去掉列表的小圆点、背景、背景渐变
1. CSS字体样式.文本样式.去掉列表的小圆点.背景.背景渐变 1.1字体样式字体样式 font-family 字体(可以添加2种字体,一种针对中文,一种针对英文) font-size 字体大小( ...
html自适应屏幕大小渐变背景色,CSS实现背景渐变和自动全屏的代码
CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色 ...
css背景渐变、css文字渐变
现在项目中,越来越常见的就是背景渐变.文字渐变了,所以这里菜鸟记录一下自己的代码,今后好直接使用背景渐变 background: linear-gradient(-45deg, #3967FF, # ...
CSS3-选择器+文字+边框+背景+颜色+渐变
文章目录 1 .介绍 CSS3的主要新特性: CSS3的属性前缀 1)主流浏览器内核 2)厂商前缀 2.CSS3选择器 1)属性选择器 2)结构性伪类 ①:root 匹配HTML标签,与body选择器 ...

【CSS 文字渐变、背景渐变实现方式】

CSS 文字渐变，背景渐变的几种实现方式

一、CSS 文字渐变：

二、CSS 背景渐变：这是我们着重讲解的部分。

（1）线性渐变：

（2）径向渐变：

（3）重复渐变：

总结：

【CSS 文字渐变、背景渐变实现方式】相关推荐

最新文章

热门文章

【CSS 文字渐变、背景渐变实现方式】

CSS 文字渐变，背景渐变的几种实现方式

一、CSS 文字渐变：

二、CSS 背景渐变：这是我们着重讲解的部分。

（1）线性渐变 ：

（2）径向渐变 ：

（3）重复渐变 ：

总结：

【CSS 文字渐变、背景渐变实现方式】相关推荐

最新文章

热门文章

（1）线性渐变：

（2）径向渐变：

（3）重复渐变：