当前位置: 首页 > article >正文

css中的渐变

文章目录

  • 一、linear-gradient
  • 二、radial-gradient
  • 三、conic-gradient

css渐变提供了比较复杂多变的颜色背景,可以构造丰富的UI样式

一、linear-gradient

  • 方向变量比较好理解,默认to bottom,从上至下,相当于180deg;
  • 角度是基于0deg确定,正值表示顺时针转动(注意是依据0deg的初始状态开始转动)
/* 线性渐变 */
/* 线性渐变的语法:background: linear-gradient(direction, color-stop1, color-stop2, ...); */
/* color-stop: 颜色,可以是颜色值或百分比,百分比是相对于整个宽度的比例,0%表示起点,100%表示终点 */
/* 默认方向是从上到下,默认deg是0deg,注意0deg是从下到上 */
/* 注意百分比指的是他与两侧颜色的中点,不包括模糊的部分,所以看起来分隔不明显;px规定模糊距离,依旧会类似换算成百分比 */
/* 如果不写px和百分比,多个颜色会自动平分模糊距离 */
/* background: linear-gradient(to right bottom, #00bfff 20%, pink 50px, yellow, green); */
background: linear-gradient(0deg, #00bfff 20%, pink 50px, yellow, green);

0deg
在这里插入图片描述
45deg
在这里插入图片描述

二、radial-gradient

  • 默认圆心就在正中央,可以自定义圆心位置
  /* 径向渐变 */
  /* 圆形中点可以自定义规定,也可以不写,默认是中心;at 50px 50px 指的是圆心位置 */
  /* circle 制定为圆形,否则根据容器大小自动变为椭圆;默认是ellipse 椭圆形 */
  /* 100%指的是圆心射线到容器边缘交点的距离,根据这个距离为基础再确定渐变的结束终点*/
  /* farthest-corner 离圆心最远的角,渐变的结束形状和容器最远角相交(应该是角顶点),意味着圆心和角连线距离就是100%距离 */
  /* closest-corner 离圆心最近的角,渐变的结束形状和容器最近角相交,意味着圆心和角连线距离就是100%距离 */
  /* farthest-side 离圆心最远的边,渐变的结束形状和容器最远边相切,意味着圆心和最远边垂线距离就是100%距离 */
  /* closest-side 离圆心最近的边,渐变的结束形状和容器最近边相切,意味着圆心和最近边垂线距离就是100%距离 */

  /* background: radial-gradient(circle farthest-corner at 50px 50px, #00bfff 10%, pink 20%, yellow 60%); */
  
  /* 基础写法 */
  /* background-image: radial-gradient(cyan 50%, blue 80%); */

farthest-corner 100%
在这里插入图片描述

三、conic-gradient

  • 起始点在中点,顺时针展示颜色选项;
  • 默认0deg;正值表示顺时针转动
  • 径向渐变是沿着半径方向渐变,锥形渐变是沿着角度方向渐变
  /* 锥形渐变 */
  background: conic-gradient(from 0deg, red, orange 50%, yellow 85%, green);

0deg
在这里插入图片描述
45deg
在这里插入图片描述


http://www.kler.cn/a/466388.html

相关文章:

  • 云备份项目--服务端编写
  • Elasticsearch Serverless中的数据流自动分片深度解析
  • 计算机网络复习(大题)
  • javaEE-文件操作和IO-文件
  • 通往O1开源之路
  • 2025/1/4期末复习 密码学 按老师指点大纲复习
  • 学技术学英文:Tomcat的线程模型调优
  • 基于 GitHub API 的 Issue 和 PR 自动化解决方案
  • ArcGIS API for JavaScript 缓冲区分析、河涌关联分析、集中连片分析
  • 高速网络数据包处理中的内核旁路技术
  • Ae 效果详解:漩涡条纹
  • .NET 8 + Ocelot + Consul 实现代理网关、服务发现
  • 365天深度学习训练营:第N1周:one-hot编码案例
  • 【Unity3D】LOD Group 多细节层次(CrossFade淡出淡入效果)
  • java: JDK isn‘t specified for module ‘product-service‘问题解决
  • 大数据-269 实时数仓 - DIM DW ADS 层处理 Scala实现将数据写出HBase等
  • 阅读线程池源码中遇到的retry:
  • 密码学精简版
  • 打靶记录24——Presidential
  • 【JavaScript】变量-常量-数据类型-类型转换
  • 如何使用axios实现并发请求
  • 【漫话机器学习系列】033.决策树回归(Decision Tree Regression)
  • 移动构造函数详解
  • MySQL使用通用二进制文件安装到Unix/Linux
  • 32单片机从入门到精通之开发环境——调试工具(七)
  • nodeJS下npm和yarn的关系和区别详解