百度360必应搜狗淘宝本站头条
grid 设置导航栏dedecms模版移位运算context xml
当前位置：网站首页 > 文章教程 > 正文

CSS3 渐变类型及其语法

xsobi 2024-12-31 15:27 1 浏览

线性渐变:

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: 渐变方向

相关推荐

C++中的多态(动态多态)究竟是如何实现

为了叙述简便，在本文中，将动态多态性一律简化为多态性。在前面的文章中，我们已经简要介绍了C++的多态性，也介绍了C++的虚函数表，下面，我们来看看C++是如何利用虚函数机制来实现多态性的。（题外话：实...

C++面向对象开发的四大特性:封装、抽象、继承、多态

1、封装封装，即隐藏对象的属性和实现细节，仅对外公开接口，控制程序对类属性的读取和修改。对于类的内部，成员函数可以自由修改成员变量，进行更精确的控制；对于类的外部，良好的封装能够减少耦合，同时隐藏实现...

C#知识|继承与多态

哈喽，你好啊，我是雷工01ProtectedProtected关键字表示这个属性只能给“子类”使用，即只能在子类内部使用，不能通过子类对象去使用；02父类定义父类...

朝文分享(54):深入C++(二十一)——多态

分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard新学苑。...

C++基础语法梳理:引用、封装、继承和多态

本期是C++基础语法分享的第六节，今天给大家来分享一下：（1）引用；...

继承和多态概念及语法

继承是面向对象编程的重要概念之一，它指的是一个类可以从另一个类中继承属性和方法。...

Java的多态如何实现的?

面向对象编程语言三大特征：继承、封装、多态。虽说是三大特征，但其实从多态的角度看，继承和封装都是为了实现多态而准备的，尤其是在一些大型优秀的框架上，多态的使用随处可见，所以说多态是一个十分重要的知识点...

C++中的多态性

封装、继承、多态是C++的三大基本特性。封装可以隐藏实现细节，使得代码模块化；继承可以扩展已存在的代码模块(类);封装和继承的目的都是为了"代码重用"，多态则是为了实现另一个目的：接口...

讲解一下Java 中的多态

多态（Polymorphism）属于面向对象三大特征之一，它的前提是封装形成独立体，独立体之间存在继承关系，从而产生多态机制。多态是同一个行为具有多个不同表现形式或形态的能力。重载式多态，也叫编译时多...

java编程笔记，多态的好处和弊端

测试代码：1.创建Animal.java类作为父类2.创建Cat.java类作为Animal的子类3.创建一个Dog.java类作为Animal的子类4.创建Test.java测试类代码说明：多态的好...

C/C++编程笔记:C++多态性知识详解

多态性一词意味着具有多种形式。简而言之，我们可以将多态定义为消息以多种形式显示的能力。一个真实的多态示例：一个人同时可以具有不同的特征。像男人一样，是父亲，丈夫，雇员。因此，同一个人在不同情况下会表现...

用通俗易懂的多态世界观实例:理解python类的多态

什么是python类的多态python的多态，可以为不同的类实例，或者说不同的数据处理方式，提供统一的接口。用比喻的方式理解python类的多态...

多态——制作饮品

classAbstractDrinking{public://煮水virtualvoidBoil(){cout<<"煮农夫山泉"<&...

python之多态、继承、重写篇

#-*-coding:UTF-8-*-classAnimal:defrun(self):print("动物会跑。。")defsl...

Java面向对象——多态

前两天已经相继介绍了Java面向对象的三大特性之中的封装、继承，所以今天就介绍Java面向对象的三大特性的最后一项，多态~首先讲一下什么是多态，以及多态需要注意的细节什么是多态：一个对象具备多种...

一周热门
最近发表
标签列表