天涯论坛

 找回密码
 立即注册
搜索
查看: 73|回复: 4

css 样式怎么样实现页面背景颜色的渐变?

[复制链接]

3056

主题

155

回帖

9923万

积分

论坛元老

Rank: 8Rank: 8

积分
99238923
发表于 2024-6-30 08:16:19 | 显示全部楼层 |阅读模式

实现渐变色,能够运用线性渐变实现如图各样渐变色效果(源码在文末),下面着重讲其中的线性渐变

渐变属性渐变:bac公斤round-image

渐变是CSS3其中比较丰富多彩的一个特性,经过渐变咱们能够实现许多炫丽的效果,有效的减少照片运用数量,并且拥有很强的适应性和可扩展性。

渐变分为:

线性渐变

bac公斤round-image: linear-gradient:沿着某条直线朝一个方向产生渐变效果。

基本语法举例

linear-gradient(方向,初始颜色,颜色...,终止颜色);

方向:to left to right to top to bottom方向30deg顺时针

渐变1:初始颜色,终止颜色:yellow, green

渐变2:颜色+起始位置:

yellow 0%,

red 40%,

green 70%,

blue 100%

突变:颜色1+起始位置,颜色1+结束位置,颜色2+起始位置,颜色2+结束位置,....:

yellow 0%,

yellow 25%,

blue 25%,

blu





上一篇:CSS 实现文字颜色渐变的 3 种办法
下一篇:前端干货!利用CSS实现花里胡哨的前端渐变效果
回复

使用道具 举报

2996

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109194
发表于 2024-10-3 18:55:16 | 显示全部楼层
我深感你的理解与共鸣,愿对话长流。
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-10-6 07:40:05 | 显示全部楼层
外链发布社区 http://www.fok120.com/
回复

使用道具 举报

2986

主题

3万

回帖

9956万

积分

论坛元老

Rank: 8Rank: 8

积分
99569168
发表于 2024-10-7 08:26:17 | 显示全部楼层
系统提示我验证码错误1500次 \~゛,
回复

使用道具 举报

3070

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158931
发表于 2024-10-24 14:21:51 | 显示全部楼层
论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上,我们要把这种精神传递下去。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 10:29 , Processed in 0.136995 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.