css3如何实现颜色渐变效果-css教程-PHP中文网

首页

web前端

css教程

css3如何实现颜色渐变效果

王林

Nov 16, 2020 pm 02:36 PM

css3 颜色渐变

css3实现颜色渐变效果的方法：可以利用linear-gradient函数和radial-gradient函数分别实现线性渐变效果和径向渐变效果，如【linear-gradient(yellow, green)】。

css3如何实现颜色渐变效果

css3渐变有两种类型：css3线性渐变和css3径向渐变。

（学习视频分享：css视频教程）

一、线性渐变颜色渐变

函数：

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

语法：

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

登录后复制

值：

direction 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,... 用于指定渐变的起止颜色。

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

登录后复制

二、径向渐变

函数；

radial-gradient() 函数用径向渐变创建 "图像"。

径向渐变由中心点定义。

为了创建径向渐变你必须设置两个终止色。

语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

登录后复制

值：

1、shape 确定圆的类型

ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变

2、size 定义渐变的大小，可能值：

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

3、position 定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。

4、start-color, ..., last-color 用于指定渐变的起止颜色。

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<style>
#grad1{
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

登录后复制

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7486

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

Golang图片处理：如何进行图片的颜色渐变和灰度映射 Aug 19, 2023 am 08:53 AM

Golang图片处理：如何进行图片的颜色渐变和灰度映射导语：随着数字媒体的发展，图片处理已成为我们日常生活中不可或缺的一部分。在Go语言中，我们可以利用一些库来进行图片处理，如github.com/disintegration/imaging。本文将介绍如何利用这个库进行图片的颜色渐变和灰度映射。一、引入库首先，我们需要在Go项目中引入github.com/