rgba(2,121,139,0.3)rgba4个值作为参数，最后一个参数透明度值是0到1的小数 。透明度属性：opacity0到1的小数，在元素上设置对整个盒子生效currentColorcss3关键字，当前元素的（或其最近父元素）继承的color值p {color: blue;color: #FF0000;color: #FF00006F;color: rgb(255, 1, 1);color: rgb(255, 1, 1,0.4);opacity: 1;border: currentColor 1px dashed;}3.4、渐变色gradient渐变色gradient（/?ɡre?di?nt/ ）是一种特别的image数据类型，用于background-image、border-image的值，实现多种渐变颜色 。可以设置多组值，逗号隔开，层叠渲染都会生效 。
线性渐变linear-gradient()沿线性方向的颜色渐变：
linear-gradient (方向/角度 , 颜色 位置% , 颜色 位置% , ...)
- 方向/角度（angle），目的是确定线性渐变的方向，有两种设置方式：
- 角度（angle，顺时针），沿指针方向渐变，单位
deg（degree） 。 - 方向，关键字
to+ 一个或多个位置（top、bottom、right、left），to right /*从左到右*/
- 角度（angle，顺时针），沿指针方向渐变，单位
- 颜色值：颜色值color 。
- 插值位置：可以是%比例，和长度（px），基于方向的渐变插值位置 。
<div class="lg"><p>b1</p> <p>p2</p> <p>p3</p></div><style>.lg p{width: 100px; height: 80px; text-align: center;font-size: 20px; line-height: 80px; margin: 10px;display: inline-block;}.lg p:nth-child(1) {background-image: linear-gradient(red, blue 20%,green 60px);}.lg p:nth-child(2) {background-image: linear-gradient(45deg, red, blue);}.lg p:nth-child(3) {background-image: linear-gradient(to right, red 20px, blue 90%);}</style>
文章插图
径向渐变radial-gradient()从中心往四周辐射扩散的颜色渐变，（radial /?re?di?l/辐射、径向） 。
radial-gradient (形状 | sizeat 圆心位置 , 颜色 位置% , 颜色 位置% , ... )
- shape：径向渐变的图形形状，ellipse (默认)、circle （圆）
- at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
- 坐标定位（像素、百分比）：
at 0 50%，at 10px 30px - 方位定位（top、bottom、right、left、center）：
at left top
- 坐标定位（像素、百分比）：
- size：渐变结束形状的大小，枚举值：closest-side、closest-corner、farthest-side、farthest-corner
<div class="rg"><p>b1</p> <p>p2</p> <p>p3</p> <p>p4</p></div><style>.rg p { width: 100px; height: 80px; text-align: center; font-size: 20px;line-height: 80px; margin: 10px; display: inline-block;}.rg p:nth-child(1) {background-image: radial-gradient(black 6px,black 10px,red,white)}.rg p:nth-child(2) {background-image: radial-gradient(circle at center,black 6px,black 10px,red,white);}.rg p:nth-child(3) {background-image: radial-gradient(at 0 80px, black 6px,black 10px,red,white);}.rg p:nth-child(4) {background-image: radial-gradient(farthest-side at 0 80px, black 6px,black 10px,red,white);}</style>
文章插图
圆锥渐变conic-gradient()沿着圆的时钟方向进行旋转渐变（conic /?k?n?k/锥形）
conic-gradient (开始角度/圆心位置 , 颜色 位置%|角度deg , 颜色 位置%|角度deg , ... )
- from angele：锥形渐变的开始角度，
from 0deg - at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
- 坐标定位（像素、百分比）：
at 0 50%，at 10px 30px经验总结扩展阅读
- CSS 动画一站式指南
- 怎么看电脑配置高低（100个电脑基础知识)
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
- CSS 渐变锯齿消失术
- 1 人人都懂的HTML基础知识-HTML教程
- Redis 02: redis基础知识 + 5种数据结构 + 基础操作命令
- Docker_基础知识
- 前端开发日常——CSS动画无限轮播
- Vue3 JS 与 SCSS 变量相互使用
- 坐标定位（像素、百分比）：
