程序员的知识教程库

网站首页 > 教程分享 正文

CSS3 渐变类型及其语法（css3的渐变属性有哪些）

henian88 2024-10-23 10:53:10 教程分享 3 ℃ 0 评论

线性渐变:

CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下

background: linear-gradient(direction, color-stop1, color-stop2, ...);

linear-gradient(渐变方向,色彩1,位置1,色彩2,位置2...)

对于线性渐变的方向,只要设置起点即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度来表示,

例如45o表示左下到右上,-45o表示左上到右下。 角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg

IE10以下的浏览器不支持此语法, 建议使用chrome浏览器或其他浏览器来浏览下面的范例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 800px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #000;

    /*线性渐变*/
    /*background-image: linear-gradient(方向(从上到下),颜色1,颜色2,颜色3····);*/
    /*background-image: linear-gradient(to right bottom,red,blue);*/
    /*background-image: linear-gradient(45deg,red,blue,pink,green,orange);*/



    /*复杂演示 color1 stop,color2 stop,*/
    background-image: linear-gradient(90deg,red 50%,blue 90%,pink,green,orange);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 0 auto;

    /*由中心向四周渐变*/
    background-image: radial-gradient(blue 100px,red);
    background-image: radial-gradient(orange,yellow,#fff,transparent);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    margin: 100px auto;
    border-radius: 50%;
    border: 1px solid red;

    background-image: repeating-radial-gradient(#fff 0px,#fff 10px,#000 10px,#000 20px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>


我们可以使用渐变工具来生成gradient语法

Ultimate CSS Gradient Generator

网址：http://www.colorzilla.com/gradient-editor/

Orientation: 渐变方向

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表