css linear-gradient和radial-gradient的区别

linear-gradientradial-gradient 是 CSS 中用于创建渐变背景的两种主要方法

1.linear-gradient(线性渐变)

linear-gradient 创建沿着一条直线方向的渐变效果。它接受一个角度参数或者两个以上的颜色值作为输入。语法如下:

html 复制代码
/* 使用角度 */
background: linear-gradient(角度, 颜色1, 颜色2, ...);
/* 使用方向关键词 */
background: linear-gradient(to 方向, 颜色1, 颜色2, ...);

示例:

html 复制代码
/* 从上到下的垂直渐变 */
background: linear-gradient(to bottom, #ff0000, #0000ff);

/* 45度角的对角线渐变 */
background: linear-gradient(45deg, #ff0000, #0000ff);

线性渐变效果的实例:

2.radial-gradient(径向渐变)

radial-gradient 创建从一个中心点向外扩散的渐变效果。它可以是圆形、椭圆形或其他形状。语法如下:

html 复制代码
/* 圆形渐变 */
background: radial-gradient(圆心位置, 渐变形状, 颜色1, 颜色2, ...);

示例:

html 复制代码
/* 从中心向四周径向渐变 */
background: radial-gradient(circle, #ff0000, #0000ff);

/* 从右下角向四周径向渐变 */
background: radial-gradient(100% 100%, #ff0000, #0000ff);

径向渐变效果的实例:

3.repeating重复的渐变

repeating-linear-gradient和repeating-radial-gradient

语法使用相对,示例:

html 复制代码
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

重复渐变效果的实例:

区别和用法

  • 方向: linear-gradient 是沿着一条直线,而 radial-gradient 则是从一个中心点向外扩散。

  • 参数: linear-gradient 接受角度或者方向关键词作为参数,而 radial-gradient 接受圆心位置和渐变形状作为参数。

  • 形状: linear-gradient 创建的是线性渐变,而 radial-gradient 则是径向渐变,可以是圆形、椭圆形或其他形状。

这些方法可以使用在各种 CSS 属性中,如 background-imagebackgroundborder-image 等,以创建各种各样的渐变效果。

相关推荐
关羽的小刀9 分钟前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端
张志鹏PHP全栈10 分钟前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js
郭邯11 分钟前
import.meta对象是什么?
前端
用泥种荷花27 分钟前
【NPM 笔记(一)】NPM 入门知识:命令、依赖与脚本核心
前端
大巨头28 分钟前
在vscode中使用通义灵码插件记录分享
前端
江城开朗的豌豆31 分钟前
Vue/React凭什么吊打传统前端?6年老司机带你揭秘它们的性能杀招!
前端·javascript·vue.js
江城开朗的豌豆31 分钟前
虚拟DOM:为什么React/Vue比直接操作DOM快10倍?
前端·javascript·vue.js
mrsk32 分钟前
JavaScript中的大数相加是怎么突破数字的极限的?
前端·javascript·面试
mrsk32 分钟前
JavaScript作用域:变量的「地盘」之争
前端·javascript·面试
北京_宏哥33 分钟前
《刚刚问世》系列初窥篇-Java+Playwright自动化测试-27- 操作单选和多选按钮 - 上篇(详细教程)
java·前端·面试