CSS3渐变属性:线性渐变和径向渐变用法教程

2024-02-28 13:58

本文主要是介绍CSS3渐变属性:线性渐变和径向渐变用法教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在CSS3之前如果需要添加渐变效果,通常要设置背景图像来实现。而CSS3中增加了渐变属性,通过渐变属性可以轻松实现渐变效果。CSS3的渐变属性主要包括线性渐变和径向渐变,本文转自黑马程序员前端培训课程,下面我们详细介绍。

CSS3线性渐变

在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的“background-image: linear-gradient(参数值);”样式可以实现线性渐变效果,其基本语法格式如下。

background-image: linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

在上面的语法格式中,linear-gradient用于定义渐变方式为线性渐变,括号内用于设定渐变角度和颜色值,具体解释如下。
 

● 渐变角度

渐变角度指水平线和渐变线之间的夹角,可以是以deg为单位的角度数值或“to”加“left”“right”“top”和“bottom”等关键词。在使用角度设定渐变起点的时候,0deg对应“to top”, 90deg对应“to right”,180deg对应“to bottom”,270deg对应“to left”,整个过程就是以 bottom为起点顺时针旋转,具体如下图所示。
 

 颜色值

颜色值用于设置渐变颜色,其中“颜色值 1”表示起始颜色,“颜色值 n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用“,”隔开。

下面通过案例来展示: 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3线性渐变用法-黑马程序员web前端开发高手班http://web.itheima.com</title><style>div {width: 200px;height: 200px;/* background-image: linear-gradient(30deg, #0f0, #00F); */background-image: linear-gradient(30deg, #0f0 50%, #00F 80%);}</style>
</head>
<body><div></div>
</body>
</html>

1632898456571_CSS3线性渐变.jpg

上面图中实现了绿色到蓝色的线性渐变。值得一提的是,在每一个颜色值后面还可以书写一个百分比数值,用于标示颜色渐变的位置,具体示例代码如下:

background-image: linear-gradient(30deg,#0f0 50%,#00F 80%);

在上面的示例代码中,可以看做绿色(#0f0)由50%的位置开始出现渐变至蓝色(#00f)位于80%的位置结束渐变。可以用Photoshop中的渐变色块进行类比,如下图所示。
 

1632898468539_CSS3线性渐变2.jpg

CSS3径向渐变

径向渐变是网页中另一种常用的渐变,在径向渐变过程中,起始颜色会从一个中心点开始,依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image: radial-gradient(参数值);”样式可以实现径向渐变效果,其基本语法格式如下。

background-image: radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...,颜色值n);

在上面的语法格式中,radial-gradient用于定义渐变的方式为径向渐变,括号内的参数值用于设定渐变形状、圆心位置和颜色值,对各参数的具体介绍如下。
 

1.渐变形状

渐变形状用来定义径向渐变的形状,其取值既可以是定义水平和垂直半径的像素值或百分比,也可以是相应的关键词。其中关键词主要包括两个值“circle”和“ellipse”,具体解释如下。

● 像素值/百分比:用于定义形状的水平和垂直半径,如“80px 50px”表示一个水平半径为80px,垂直半径为50px的椭圆形。

● circle:指定圆形的径向渐变。

● ellipse:指定椭圆形的径向渐变。
 

2.圆心位置

圆心位置用于确定元素渐变的中心位置,使用“at”加上关键词或参数值来定义径向渐变的中心位置。该属性值类似于CSS中background-position属性值,如果省略则默认为“center”。该属性值主要有以下几种。

● 像素值/百分比:用于定义圆心的水平和垂直坐标,可以为负值。

● left:设置左边为径向渐变圆心的横坐标值。

● center:设置中间为径向渐变圆心的横坐标值或纵坐标。

● right:设置右边为径向渐变圆心的横坐标值。

● top:设置顶部为径向渐变圆心的纵标值。

● bottom:设置底部为径向渐变圆心的纵标值。
 

3.颜色值

“颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用“,”隔开。

下面运用径向渐变来制作一个小球

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3径向渐变用法-黑马程序员web前端开发高手班http://web.itheima.com</title><style>div {width: 200px;height: 200px;/* 设置径向渐变 */background-image: radial-gradient(ellipse at center, #0f0, #030);border-radius: 50%;}</style>
</head>
<body><div></div>
</body>
</html>

上面案例中为div定义了一个渐变形状为椭圆形,径向渐变位置在容器中心点,绿色(#0f0)到深绿色(#030)的径向渐变;同时使用“border-radius”属性将容器的边框设置为圆角。值得一提的是,同“线性渐变”类似,在“径向渐变”的颜色值后面也可以书写一个百分比数值,用于设置渐变的位置。

1632898479432_径向渐变.jpg

CSS3重复渐变

在网页设计中,经常会遇到在一个背景上重复应用渐变模式的情况,这时就需要使用重复渐变。重复渐变包括重复线性渐变和重复径向渐变,具体解释如下。
 

1.重复线性渐变

在CSS3中,通过“background-image: repeating-linear-gradient(参数值);”样式可以实现重复线性渐变的效果,其基本语法格式如下。

background-image: repeating-linear-gradient(渐变角度,颜色值1,颜色值2...,颜色值n);

在上面的语法格式中,“repeating-linear-gradient(参数值)”用于定义渐变方式为重复线性渐变,括号内的参数取值和线性渐变相同,分别用于定义渐变角度和颜色值。

下面通过一个案例对重复线性渐变进行演示,如下所示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3线性渐变用法-黑马程序员web前端开发高手班http://web.itheima.com</title><style>div {width: 200px;height: 200px;/* background-image: linear-gradient(30deg, #0f0, #00F); */background-image: linear-gradient(30deg, #0f0 50%, #00F 80%);}</style>
</head>
<body><div></div>
</body>
</html>

为div定义了一个渐变角度为90deg,红黄绿三色的重复线性渐变,效果如下所示。

1632898488726_重复渐变.jpg

2.重复径向渐变

在CSS3中,通过“background-image: repeating-radial-gradient(参数值);”样式可以实现重复线性渐变的效果,其基本语法格式如下。

background-image: repeating-radial-gradient(渐变形状圆心位置,颜色值1,颜色值2...,颜色值n);

在上面的语法格式中,“repeating-radial-gradient(参数值)”用于定义渐变方式为重复径向渐变,括号内的参数取值和径向渐变相同,分别用于定义渐变形状、圆心位置和颜色值。

下面通过一个案例对重复径向渐变进行演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3重复径向渐变用法-黑马程序员web前端开发高手班http://web.itheima.com</title><style>div {width: 300px;height: 300px;background-image: repeating-radial-gradient(circle at 50% 50%, #E50743, #E8ED30 10%, #3FA62E 15%);}</style>
</head>
<body><div></div>
</body>
</html>
</html>

为div定义了一个渐变形状为圆形,径向渐变位置在容器中心点,红、黄、绿三色径向渐变。
 

1632898497305_重复径向渐变.jpg

这篇关于CSS3渐变属性:线性渐变和径向渐变用法教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/755701

相关文章

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器:探测开放端口2.简易 HTTP 服务器:10 秒搭个网页3.局域网游戏:多人联机对战4.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方