CSS新手入门笔记整理:CSS3颜色样式

opacity透明度

语法

div{opacity:数值;}
  • opacity属性的取值范围为0.0~1.0。其中0.0表示完全透明,1.0表示完全不透明。
  • opacity属性不仅作用于元素的背景颜色,还会作用于内部所有子元素以及文本内容。

RGBA颜色

RGB是一种色彩标准,由红(Red)、绿(Green)、蓝(Blue)3种颜色变化来得到各种颜色。而RGBA是在RGB基础上增加了一个透明度通道Alpha。

语法

div{background-color:rgba(R, G, B, A);}
div{background-color:rgba(255, 255, 0, 0.5);}
div{background-color:rgba(50%, 80%, 50%, 0.5);}

R,指的是红色值(Red);G,指的是绿色值(Green);B,指的是蓝色值(Blue);A,指的是透明度(Alpha)。R、G、B这三个参数可以为整数,取值范围为0~255,也可以为百分比,取值范围为0%~100%。参数A为透明度,跟opacity属性是一样的,取值范围为0.0~1.0。


渐变

线性渐变linear-gradient

语法

div{background:linear-gradient(方向, 开始颜色, 结束颜色);}

线性渐变的"方向"取值有两种:

  • 一种是使用角度(单位为deg)
  • 另一种是使用关键字

|--------------|----------|---------------|
| 线性渐变的"方向"取值 |||
| 属性值 | 对应角度 | 说明 |
| to top | 0deg | 从下到上 |
| to bottom | 180deg | 从上到下(默认值) |
| to left | 270deg | 从右到左 |
| to right | 90deg | 从左到右 |
| to top left | 无 | 从右下角到左上角(斜对角) |
| to top right | 无 | 从左下角到右上角(斜对角) |

线性渐变也可以接受一个"值列表",用于同时定义多种颜色的线性渐变,颜色值之间用英文逗号隔开即可。


径向渐变radial-gradient

语法

div{background:radial-gradient(position, shape size, start-color, stop-color);}
div{background:radial-gradient((center, orange, blue));}
  • position用于定义圆心位置。shape size用于定义形状大小,由两部分组成,shape定义形状,size定义大小。start-color和stop-color分别用于定义开始颜色和结束颜色。
  • 其中,position和shape size都是可选参数。如果省略,则表示采用默认值。start-color和stop-color都是必选参数,可以有多个颜色值。

圆心位置position

position常用取值有两种:一种是"长度值"(如10px),另一种是"关键字"

|---------------|--------|
| 属性值 | 说明 |
| center | 中部(默认值 |
| top | 顶部 |
| bottom | 底部 |
| left | 左部 |
| right | 右部 |
| top center | 靠上居中 |
| top left | 左上 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |


形状 shape size

|---------|---------|
| 参数shape取值 ||
| 属性值 | 说明 |
| ellipse | 圆形(默认值) |
| circle | 圆形 |

|-----------------|-------------------------|
| 参数size取值 ||
| 属性值 | 说明 |
| closet-side | 指定径向渐变的半径长度为从圆心到离圆心最近的边 |
| closet-corner | 指定径向渐变的半径长度为从圆心到离圆心最近的角 |
| farthest-side | 指定径向渐变的半径长度为从圆心到离圆心最远的边 |
| farthest-corner | 指定径向渐变的半径长度为从圆心到离圆心最远的角 |


开始颜色start-color,结束颜色stop-color

径向渐变可以接受一个"值列表",用于同时定义多种颜色的径向渐变。

默认情况下,径向渐变的颜色节点是均匀分布的,不过我们可以为每一种颜色添加百分比,从而使得各个颜色节点不均匀分布。

语法

div{background:radial-gradient(red 5%,green 30%,blue 60%);}

相关推荐
web1478621072318 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478019 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
飞的肖23 分钟前
前端使用 Element Plus架构vue3.0实现图片拖拉拽,后等比压缩,上传到Spring Boot后端
前端·spring boot·架构
青灯文案130 分钟前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_7482548835 分钟前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood1 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端1 小时前
0基础学前端-----CSS DAY9
前端·css
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui