CSS3-颜色渐变--线性渐变+径向渐变

最新推荐文章于 2024-07-11 11:24:40 发布

Marvel__Dead

最新推荐文章于 2024-07-11 11:24:40 发布

阅读量1.7k

点赞数 1

分类专栏： CSS3 文章标签： css3 webkit w3c 渐变

本文链接：https://blog.csdn.net/Marvel__Dead/article/details/54710417

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

下面我要说的渐变是w3c的标准渐变，庆幸的是w3c的渐变目前PC所有浏览器都兼容支持。包括我在安卓机上的测试都支持（PC端测试IE,谷歌，火狐，搜狗等几个浏览器。移动端测试安卓系统，uc浏览器和自带浏览器。所有测试版本为2016年最新版本。）
也就是说，我们只需要写w3c的标准就行了，但是在苹果和很多移动端浏览器，我们必须要加上webkit前缀的渐变。

线性渐变

W3C标准

语法从官网copy下来的

linear-gradient

linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)

1.angle的取值是任意角度，如100deg或者多少弧度。0度表示从下向上，90度表示从左到右。参考下面图片
这里写图片描述
但是-webkit-的方向就不一样了。0度表示从左到右，90度表示从下到上。
2.side-or-corner是几个关键字分别表示x轴和y轴，X轴取值left,center,right；Y轴取值top,center,bottom。默认为X轴center,Y轴center。记住在关键字前面要加一个to。x和y轴只加一个to。
3.color-stop-list取值为两个，第一个为任意颜色值，第二个为颜色标点，取值为多少px或者百分之几等常用取值。即在哪儿必须为什么颜色。color-stop-list至少两个，可以为n个,不写颜色标点默认为平均分配。

repeating-linear-gradient

repeating-linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)//只是在前面加了个repeating。

webkit的标准

-webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

-webkit-repeating-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

point表示x和y轴的关键字，left,center,right;top,center,bottom。默认值为center center。
angle表示角度，多少deg，多少弧度。0度表示从左到右。90度表示从下到上。
stop表示颜色渐变标点，至少两个stop，可以有n个stop。stop取值为两个。第一个值为任意颜色。第二个为标点，取值多少px和百分之几。不写颜色标点默认为平均分配。

练习：

这里写图片描述

相信大家都见过这个场景，有两条渐变。小米处理的方式是通过图片的方式。下面我们将要通过代码的方式写出来，效果和这个效果没差别。
写出来的效果：
这里写图片描述

下面是-webkit-标准写法目的为了支持移动端兼容，包括安卓和苹果系统浏览器。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:357px;height:3px;background:-webkit-linear-gradient(left,#ffaa01,#ed4178);}
    //颜色变化，从左到右，注意webkit颜色变化和w3c颜色变化方向不一样。
    //也可以这样写：-webkit-linear-gradient(0deg,#ffaa01,#ed4178);
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

下面是w3c标准写出来的代码效果和上面的一样：
目的为了兼容pc端浏览器，IE,FireFox,欧朋，谷歌等浏览器。加上上面的兼容移动端的。就能够组成完整的代码。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:357px;height:3px;margin:100px auto;background:linear-gradient(to right,#ffaa01,#ed4178);}
    //也可以这样：linear-gradient(90deg,#ffaa01,#ed4178)
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

兼容PC端各大主流浏览器，和移动端（安卓加ios）：
效果和上面一样。注意标准代码写在最下面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:357px;height:3px;margin:100px auto;background:-webkit-linear-gradient(left,#ffaa01,#ed4178);background:linear-gradient(90deg,#ffaa01,#ed4178);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

重复线性渐变：

这里写图片描述

w3c写法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:200px;height:200px;margin:100px auto;border:1px solid #46F732;background:repeating-linear-gradient(to right,red 20%,blue 40%);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

-webkit-写法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:200px;height:200px;margin:100px auto;border:1px solid #46F732;background:-webkit-repeating-linear-gradient(left,red 20%,blue 40%);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

径向渐变

径向渐变比线性渐变复杂，但是知道了语法的意思也就简单了。

w3c的语法：

共两个：

radial-gradient(
  [ <shape> || <size> ]? [ at <position> ]? ,
  <color-stop>
)

1.shape取值一共两个，circle和ellipse，表示圆和椭圆。默认值为椭圆。
2.size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

当然size也可以设置具体的值，共两个。第一个为横向的长度，第二个为纵向的长度。单位为px或者百分之几。

3.positon表示圆心的位置，取值两个分别为x轴和y轴。left,center,right。top,center,bottom。默认为center center，当然也可以是具体的值如 100px 120px；表示x轴方向100px y轴方向120px。

4.color-stop。取值为两个，第一个为任意颜色值，第二个为颜色标点，取值为多少px或者百分之几等常用取值。即在哪儿必须为什么颜色。color-stop至少两个，可以为n个,不写颜色标点默认为平均分配。

repeating-radial-gradient(
  [ <shape> || <size> ]? [ at <position> ]? ,
  <color-stop>
)

-webkit-标准：

共两个：

-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

-webkit-repeating-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);

练习：

这里写图片描述

w3c标准：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:300px;height:300px;border-radius:100%;margin:100px auto;background:radial-gradient(circle at 100px 100px,red,blue);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

-webkit-标准：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:300px;height:300px;border-radius:100%;margin:100px auto;background:-webkit-radial-gradient(100px 100px,circle , red,blue);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

解决兼容的标准代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:300px;height:300px;border-radius:100%;margin:100px auto;background:-webkit-radial-gradient(100px 100px,circle , red,blue);background:radial-gradient(circle at 100px 100px,red,blue);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

练习02：

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:141px;font:bold 20px/141px "宋体";text-align:center;color:white;border-radius:100%;margin:100px auto;background:-webkit-radial-gradient(circle,#c83dcb,#410e74);background:radial-gradient(circle,#c83dcb,#410e74)}
</style>
</head>
<body>
<div class="box">center</div>
</body>
</html>

练习03：

重复渐变

这里写图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
    .box{width:300px;height:300px;margin:100px auto;border-radius:100%;background:-webkit-repeating-radial-gradient(circle,#f83d38,#ffac1c 10%,#f83d38 30%);background:repeating-radial-gradient(circle,#f83d38,#ffac1c 10%,#f83d38 30%);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>