我的学习笔记——CSS背景渐变(Gradients)详解

一.线性渐变（Linear Gradients）

1.语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

2.方向direction :向下/向上/向左/向右/对角方向,默认方向为从上至下
①向下线性渐变(默认)

background:linear-gradient(pink,DeepSkyBlue);

②向上线性渐变

 background:linear-gradient(to top,pink,DeepSkyBlue);

③向左线性渐变

 background:linear-gradient(to left,pink,DeepSkyBlue);

④向右线性渐变

background:linear-gradient(to right,pink,DeepSkyBlue);

⑤对角方向线性渐变
补充:关于对角的定义,来自菜鸟https://www.runoob.com/css3/css3-gradients.html
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

 background:linear-gradient(45deg,pink,DeepSkyBlue);

3.颜色
使用多个颜色

background:linear-gradient(to right,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);

background:linear-gradient(135deg,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);

4.支持透明度设置

 background:linear-gradient(rgba(255,182,193,0.7),rgba(0,191,255,0.7));

5.支持设置纯色

//使用像素点设置
background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);

//使用百分比设置
background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);

6.重复的线性渐变repeating-linear-gradient

 background:repeating-linear-gradient(to right,pink 10%,DeepSkyBlue 20% );

二. 径向渐变(Radial-Gradient)

1.语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

2.方向
由里向外渐变

 background:radial-gradient(pink ,DeepSkyBlue  );

3.设置固定颜色

 background:radial-gradient(pink 50px,DeepSkyBlue 50px );

4.形状
①默认为elipse椭圆.

 background:radial-gradient(pink ,DeepSkyBlue  );

②circle圆形.

 background:radial-gradient(circle,pink ,DeepSkyBlue  );

5.支持多个颜色

 background:radial-gradient(circle,pink,DeepSkyBlue,Aqua,Gold,OrangeRed );

6.支持纯色样式

 background:radial-gradient(circle,pink 50px,DeepSkyBlue 50px ,DeepSkyBlue 100px );

7.第一个参数shape size at position
①第一个参数的第一个参数 shape:设置形状 cicle圆形或者默认椭圆
②第一个参数的第二个参数 size:设置半径
传一个值

background:radial-gradient(200px,pink ,DeepSkyBlue );

半径传两个值:默认椭圆,第一个表示横向半径,第二个表示纵向半径

③关键字 closest-side/closest-corner/farthest-side/farthest-corner ,这个取决于圆心的位置,圆心的位置表示前面要加at
closest-sid取圆心距离边框最近的的距离作为渐变的半径
farthest-side取圆心位置距离边框最长的距离作为渐变的半径
closest-corne取圆心位置距离最短的角的距离作为渐变的半径
farthest-corner取圆心位置距离最长的角的距离作为渐变的半径

   /*closest-side取圆心位置距离边框最短的距离作为渐变的半径*/background: radial-gradient(closest-side, pink, Deepskyblue);/*40%只写一个表示圆心位置为40% 50% 取最短则为40%*/background: radial-gradient(closest-side circle at 40%, pink, Deepskyblue);background: radial-gradient(closest-side circle at 20% 30%, pink, Deepskyblue);/*closest-corne取圆心位置距离最短的角的距离作为渐变的半径*/background: radial-gradient(closest-corner, pink, Deepskyblue);background: radial-gradient(closest-corner circle at 40%, pink, Deepskyblue);background: radial-gradient(closest-corner circle at 10% 10%, pink, Deepskyblue);/*farthest-side取圆心位置距离边框最长的距离作为渐变的半径*/background: radial-gradient(farthest-side, pink, Deepskyblue);background: radial-gradient(farthest-side circle at 40%, pink, Deepskyblue);background: radial-gradient(farthest-side circle at 20% 80%, pink, Deepskyblue);/*farthest-corner取圆心位置距离最长的角的距离作为渐变的半径*/background: radial-gradient(farthest-corner, pink, Deepskyblue);background: radial-gradient(farthest-corner circle at 40%, pink, Deepskyblue);background: radial-gradient(farthest-corner circle at 10% 80%, pink, Deepskyblue);

8.重复的径向渐变

 background: repeating-radial-gradient(pink 10%,Deepskyblue 20%);

3D球

   border-radius: 50%;background: radial-gradient(200px circle at 50px 50px ,rgba(0,191,255,0.1),rgba(0,191,255,0.9));box-shadow: 2px 2px 5px 1px deepskyblue;

我的学习笔记——CSS背景渐变(Gradients)详解相关推荐

JDBC学习笔记02【ResultSet类详解、JDBC登录案例练习、PreparedStatement类详解】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...
小猫爪：i.MX RT1050学习笔记26-RT1xxx系列的FlexCAN详解
i.MX RT1050学习笔记26-RT1xxx系列的FlexCAN详解 1 前言 2 FlexCAN简介 2.1 MB(邮箱)系统 2.1.1 正常模式下 2.1.2 激活了CAN FD情况下 2. ...
IP地址和子网划分学习笔记之《IP地址详解》
在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. IP地址和子网划分学习笔记相关篇章: 1.I ...
IP地址和子网划分学习笔记之《子网划分详解》
一,子网划分概述 IP地址和子网划分学习笔记相关篇章: 1.IP地址和子网划分学习笔记之<预备知识:进制计数> 2.IP地址和子网划分学习笔记之<IP地址详解> 3.IP地址和 ...
CSS学习笔记 | CSS背景
CSS背景本文内容: CSS背景:1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图片固定(背景附着)6. 背景复合写法7. 背景色半透明8. 背景总结通过CSS背景属性,可 ...
MIT 6.824 学习笔记（一）--- RPC 详解
从本文开始,将记录作者学习 MIT 6.824 分布式系统的学习笔记,如果有志同道合者,欢迎一起交流. RPC 的定义和结构 RPC 全称为 Remote Procedure Call,他表示一种远程 ...
redis学习笔记(2)之redis主从详解
redis主从详解主从详解主从配置拓扑原理数据同步概念复制偏移量复制积压缓冲区主节点运行ID Psync命令全量复制流程部分复制流程心跳缓冲大小调节读写分离内容来源为六星 ...
redis学习笔记(7)之redis哨兵详解
redis哨兵详解 sentinel命令客户端连接素材代码思路实现过程哨兵的切换实现原理发布订阅基础哨兵的实现原理部署建议需要关注的问题代码流程内容来源为六星教育,这里仅作为学习 ...
Apollo星火计划学习笔记——Apollo决策规划技术详解及实现（以交通灯场景检测为例）
文章目录前言 1. Apollo决策技术详解 1.1 Planing模块运行机制 1.2 Apollo决策功能的设计与实现 1.2.1参考路径 Reference Line 1.2.2 交规决策 T ...

我的学习笔记——CSS背景渐变(Gradients)详解

我的学习笔记——CSS背景渐变(Gradients)详解

一.线性渐变（Linear Gradients）

二. 径向渐变(Radial-Gradient)

我的学习笔记——CSS背景渐变(Gradients)详解相关推荐

最新文章

热门文章