css如何实现渐变效果？css背景色渐变与文字渐变效果的实现（代码实例）

最新推荐文章于 2024-06-20 11:21:40 发布

一 sky

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量3.9w

点赞数 10

分类专栏： html+css

html+css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在前端网页开发的时候，往往会用到一些渐变色的效果，这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的？本章就给大家带来css如何实现渐变效果？css背景色渐变与文字渐变效果的实现（代码实例），介绍css 渐变样式和如何实现css渐变。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、css 背景色渐变样式

1. css 线性背景渐变样式

语法：

1	`background-image: linear-gradient(<point> \|\| <angle>, <stop>, <stop> , <stop>)`

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比。

代码（考虑浏览器兼容性）：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css背景渐变--线性渐变</title>

<style>

.demo{

width:500 ;

height: 300;

margin: 50px auto;

}

.demo *{

width: 200px;

height: 200px;

margin: 20px;

text-align: center;

line-height: 200px;

color: #fff;

font-size: 16px;

float: left;

}

.demo1{

/* 底色 */

background-color: #fd0d0d;

/* chrome 2+, safari 4+; multiple color stops */

background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));

/* chrome 10+, safari 5.1+ */

background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);

/* firefox; multiple color stops */

background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);

/* ie 6+ */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c');

/* ie8 + */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd0d0d', endColorstr='#d89e3c')";

/* ie10 */

background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);

/* opera 11.1 */

background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);

/* 标准写法 */

background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

}

.demo2{

/* 底色 */

background-color:#d41a1a;

/* chrome 2+, safari 4+; multiple color stops */

background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));

/* chrome 10+, safari 5.1+ */

background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);

/* firefox; multiple color stops */

background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);

/* ie10 */

background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);

/* opera 11.1 */

background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);

/* 标准写法 */

background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

}

</style>

</head>

<body>

<div class="demo">

<div class="demo1">基本线性渐变--自上而下</div>

<div class="demo2">基本线性渐变--45度角</div>

</div>

</body>

</html>

效果图：

可以看出两个线性渐变的区别就在于background-image: linear-gradient();里的三个颜色值的第一个颜色值（#fd0d0d）变成了角度值：45deg。

2. css 径向背景渐变样式

css径向颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样，它不是沿着一个方向渐变，而是以一个点为中心，向四周辐射渐变，360度的。目前除了IE外的所有浏览器都支持css径向颜色渐变(Radial Gradients)，但它们也都有各自不同的语法

语法：

1	`background-image: radial-gradient([<position> \|\| <angle>]，[<shape> \|\| <size>]，<stop>，<stop>，<stop>)`

代码实例（考虑浏览器兼容性）：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css背景渐变--径向渐变</title>

<style>

.demo{

width:500px ;

height:200px;

margin: 50px auto;

}

.demo *{

width:200px ;

height:200px;

margin: 50px 15px;

float: left;

}

.demo1{

background-image: -moz-radial-gradient(#ecff05, red);

background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */

background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */

background-image: radial-gradient(#ecff05, red);

}

.demo2{

background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);

background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);

background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);

}

</style>

</head>

<body>

<div class="demo">

<div class="demo1"></div>

<div class="demo2"></div>

</div>

</body>

</html>

效果图：

二、css 字体文字渐变样式

代码实例（考虑浏览器兼容性）：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>css字体文字渐变</title>

<style>

.demo{

width:500px ;

height:200px;

margin: 50px auto;

font-size: 20px;

background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));

/*必需加前缀 -webkit- 才支持这个text值 */

-webkit-background-clip: text;

/*text-fill-color会覆盖color所定义的字体颜色： */

-webkit-text-fill-color: transparent;

}

</style>

</head>

<body>

<div class="demo">css字体文字渐变,css字体文字渐变</div>

</body>

</html>

效果图：

核心代码：

background-image：定义用到的渐变颜色范围；
-webkit-background-clip: text----以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉；
-webkit-text-fill-color: transparent---检索或设置对象中的文字填充颜色。

注：

由于目前text-fill-color属性貌似就webkit核心的浏览器支持，所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色，IE下就更不用说了。

来源：http://www.php.cn/css-tutorial-409954.html

一 sky

关注

10
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
css如何实现渐变效果？css背景色渐变与文字渐变效果的实现（代码实例）

在前端网页开发的时候，往往会用到一些渐变色的效果，这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的？本章就给大家带来css如何实现渐变效果？css背景色渐变与文字渐变效果的实现（代码实例），介绍css 渐变样式和如何实现css渐变。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css 背景色渐变样式1. css 线性背景渐变样式语法...
复制链接

扫一扫

专栏目录