网页制作

CSS 辐射渐变背景 radial-gradient的实现
网页制作 2024/12/28 佚名
3 2

MDN参考资料

核心概念

CSS 辐射渐变背景 radial-gradient的实现 

1. 中心点

就是椭圆或者圆的中心

2. 边缘

就是椭圆或者圆的边缘。为什么要用边缘，而不用宽高呢，因为后面的几个关键概念，用的都是这个边缘。

3. 渐变颜色

跟线性渐变一样，一组颜色设定表示渐变过程。没什么好讲的，后面将统一用 [red, #fff 99%, blue] 这个渐变组合，表示从红色变换到白色，最后以一个1%蓝色结束，方便查看边缘。

用法

background-image:radial-gradient(形状 尺寸 at 中心位置，初始颜色，颜色+);

以最简单的用法 radial-gradient(red, blue) 来说，其实是下面的简写

radial-gradient(ellipse farthest-corner at center center, red 0, blue 100%)

代表的意思是：椭圆辐射 边缘在最远的角 中心点位置在图片中心，红色开始，蓝色结束

CSS 辐射渐变背景 radial-gradient的实现

其中蓝色椭圆边缘是我加上去的，实际看不见，附代码：

.radial {
  background: gold;
  background-image:
    radial-gradient( red, blue)
  ;
  background-size: 400px 200px;
  background-position: center center;
  background-repeat: no-repeat;
  height: 300px;
}

语法解析

 1. 形状

ellipse | circle

默认是ellipse椭圆。

2. 尺寸

closest-side | closest-corner | farthest-side | farthest-corner

宽度，高度

第一种，预设值

第一种是用系统的四种预设值

CSS 辐射渐变背景 radial-gradient的实现

默认值是farthest-corner。 通过上图我们可以看到

  • closest-side 表示其边缘正好贴合最近的两个边（左边和上边）
  • closest-corner 表示其边缘正好贴合最近的那个角（左上角）
  • farthest-side 表示其边缘正好贴合最远的两个边（右边和下边）
  • 默认值 farthest-corner表示其边缘正好贴合最远的角（右下角）

附代码：

.App {
  display: flex;
  flex-wrap: wrap;
}
.radial {
  border: 1px solid gray;
  box-sizing: border-box;
  background: gold;
  background-size: 400px 200px;
  background-position: center center;
  background-repeat: no-repeat;
  height: 300px;
  width: 50%
}

.closest-side {
  background-image:
    radial-gradient(closest-side at 100px 50px, red, #fff 99%, blue)
  ;
}
.closest-corner {
  background-image:
    radial-gradient(closest-corner at 100px 50px, red, #fff 99%, blue)
  ;
}
.farthest-side {
  background-image:
    radial-gradient(farthest-side at 100px 50px, red, #fff 99%, blue)
  ;
}
.farthest-corner {
  background-image:
    radial-gradient(farthest-corner at 100px 50px, red, #fff 99%, blue)
  ;
}

第二种 固定值

第二种是用宽高来设置，就像设置普通元素width，height那样使用，没什么好讲的。

CSS 辐射渐变背景 radial-gradient的实现

代码

radial-gradient(ellipse 100px 70px at 100px 50px, red, #fff 99%, blue)
 radial-gradient(ellipse 80% 50%  at 100px 50px, red, #fff 99%, blue)

为什么使用coner也可以确定椭圆的形状？

closest-corner 和 farthest-corner 这两个预设尺寸，很奇怪，只知道中心点，和边缘的一个点（最远角或最近角），按道理来说，是能画无数个椭圆的，那浏览器到底是怎么确定椭圆尺寸的呢？这个真的真的真的想了好久，最后我猜测的是：浏览器先按照closest-side确定椭圆的宽高比例，再进行缩放到角上。

3. 中心位置

就是确定椭圆中心的位置，基本上你可用于position的值类型，都可以用作这里

4. 渐变颜色组合

没什么好讲的，就是一组颜色和位置构成一个渐变。

注意 1. 渐变是个background-image

只要是渐变（linear-gradient或者radial-gradient），就会被处理成一张图片，所以可以用于背景图片的设置，基本都可以用于这里，例如背景图片尺寸，位置，repeat等等。

最后，来加非常简单的背景 一块桌布

CSS 辐射渐变背景 radial-gradient的实现

代码

.radial {
  border: 1px solid gray;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: 400px;
  height: 400px;
  background-image:
    repeating-radial-gradient(circle at left -200px, rgba(255, 0, 0, .5) 0 10px, transparent 0 20px),
    repeating-radial-gradient(circle at right -200px, rgba(0, 255, 0, .5) 0 10px, transparent 0 20px)
  ;
}

一个月亮

CSS 辐射渐变背景 radial-gradient的实现

代码：

.radial {
  border: 1px solid gray;
  box-sizing: border-box;
  background-repeat: no-repeat;
  width: 400px;
  height: 400px;
  background-color: #000;
  background-image:
    radial-gradient(circle 300px at -90px -90px, #000 0 85%, transparent),
    radial-gradient(circle 200px at left top, #fff 0 99.9%, transparent)
    
  ;
  background-size: 300px 300px, 200px 200px;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
CSS,辐射渐变背景,radial-gradient
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无争山庄资源网 Copyright www.whwtcm.com

评论“CSS 辐射渐变背景 radial-gradient的实现”

暂无“CSS 辐射渐变背景 radial-gradient的实现”评论...
www.whwtcm.com 无争山庄资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/12/28

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
无争山庄资源网 Copyright www.whwtcm.com