重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言

本文收录于CSS系列文章中,欢迎阅读指正

在计算机编程中,函数有着重要的作用和意义,它可以实现封装,复用,模块化,参数等功能效果,在如何在CSS中写变量?一文带你了解前端样式利器文章中,我介绍了CSS中的变量的使用方式,通过var函数以及--变量的写法实现了动态修改css的效果。除此之外CSS还提供了哪些函数供开发者使用?

我将CSS的函数分为以下几类方便理解及归类:颜色,计算,图像和图形,渐变,滤镜,变换,其他。本文将详细介绍CSS中颜色,计算,图像和图形函数以及使用方式。更多函数及详细使用参照:CSS 值函数 - CSS:层叠样式表 | MDN

颜色函数

rgb()

定义颜色使用红色(R)、绿色(G)和蓝色(B)三个颜色通道的值,格式为rgb(255,255,255),其中值的范围为0到255。

rgba()

与rgb()功能相似,但增加了一个alpha通道来指定透明度,格式为rgba(255,255,255,0.5),其中最后一个值的范围为0到1表示透明度。

hsl()

使用色相(Hue)、饱和度(Saturation)、亮度(Lightness)来定义颜色,格式为hsl(120,100%,50%)。

hsla()

hsl()的扩展,增加了一个alpha通道来控制透明度,格式为hsla(120,100%,50%,0.3)。

opacity()

控制元素整体的透明度,且透明度的继承方式有所不同,在新版本中常用于rgba()或hsla()函数内。

上述函数的用法如下:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS颜色函数</title><style>.color-box {padding: 20px;margin: 10px 0;color: #fff;text-shadow: 1px 1px 1px #000;border: 1px solid #ddd;/* 添加边框便于观察透明度效果 */}.rgb {background-color: rgb(255, 0, 0);/* 纯红色 */}.rgba {background-color: rgba(0, 255, 0, 0.5);/* 50% 透明度的绿色 */}.hsl {background-color: hsl(240, 100%, 50%);/* 鲜艳的蓝色 */}.hsla {background-color: hsla(60, 100%, 50%, 0.3);/* 30% 透明度的黄色 */}.opacity {background-color: #0000ff;/* 蓝色 */opacity: 0.75;/* 75% 的透明度 */}</style>
</head><body><div class="color-box rgb">这是一个背景为RGB颜色的div。</div><div class="color-box rgba">这是一个背景为带透明度的RGBA颜色的div。</div><div class="color-box hsl">这是一个背景为HSL颜色的div。</div><div class="color-box hsla">这是一个背景为带透明度的 HSLA 颜色的 div。</div><div class="color-box opacity">这是一个背景颜色为蓝色且设置了75%透明度的div。</div>
</body></html>

 

计算函数

calc()

它允许你在CSS属性值中进行计算。它可以用来加、减、乘以或除以任何数值,并且可以结合使用不同的单位。这是一个强大的函数,因为它允许混合使用百分比、像素、REM等单位,从而实现复杂的布局。

min()

接受一组值作为参数,并返回最小的值。在响应式设计中特别有用,因为它可以帮助确保值不会超出所需的范围。

max()

与min()相反,max()函数从所提供的一系列值中取最大值。这同样适合响应式设计,允许设置一个值不低于某个特定的范围。

clamp()

clamp()函数是min()和max()的结合体,用于将一个值限制在一个范围之内。它接收三个参数:最小值、理想值(通常是一个可变的值,如视口的宽度的百分比),以及一个最大值。

var()

参照文章:如何在CSS中写变量?一文带你了解前端样式利器。用于插入自定义属性的值,这些自定义属性通常称为CSS变量。有一点在之前文章没提到:它接收两个参数,第一个是变量值。第二个是默认值,当变量不存在时就会默认使用第二个值。它们在全局或局部作用域定义,然后可以在文档的任何地方重复使用。

我们同样使用一个html文件对上述函数做个案例介绍

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>CSS计算函数</title><style>:root {--main-padding: 10px;/* CSS变量 */}.container {max-width: 800px;margin: 0 auto;padding: var(--main-padding, 20px);/* 使用CSS变量var */border: 2px solid #333;background-color: lightblue;}.dynamic-width {background-color: lightcoral;width: calc(100% - 2 * var(--main-padding));/* 使用calc()计算宽度 */margin: 20px 0;padding: 20px;text-align: center;}.default-width {background-color: lightseagreen;width: var(--main-width, 200px);/* var的第一个参数取不到时,使用第二个参数的默认值 */margin: 20px 0;padding: 20px;text-align: center;}.min-max-example {background-color: lightcyan;width: max(300px, 50%);/* 使用max() */height: min(150px, 25%);/* 使用min() */margin: 20px 0;padding: 20px;text-align: center;}.clamp-example {background-color: lightgreen;width: 100%;padding: 20px;font-size: clamp(12px, 2vw, 18px);/* 使用clamp() */text-align: center;}</style>
</head><body><div class="container"><div class="dynamic-width">文字框(宽度动态计算)</div><div class="default-width">使用默认宽度</div><div class="min-max-example">此框体的宽度不小于300px,且不超过父容器的50%,高度为150px或父容器的25%,取较小值。</div><div class="clamp-example">字体大小会根据视口宽度动态调整,但不会小于12px,也不会超过18px。</div></div>
</body></html>

 

图像

url()

url用于引入外部资源,如图像或Web字体文件。它通常用于background-image或border-image等属性。

image-set()

image-set允许作者根据屏幕的分辨率提供一组图像。浏览器会选择最适合设备的图像来显示。

图形

以下函数常用于clip-path、offset-path和shape-outside属性中

circle()

circle(<shape-radius>, <position>)函数用于创建剪切路径,形成一个圆形的剪裁区域。

ellipse()

与circle类似,ellipse(<shape-radius>, <position>)函数用于创建椭圆形的剪裁路径。

inset()

inset(top right bottom left round border-radius)函数用于创建一个矩形的裁剪路径,位置参数类型是<length-percentage>,round: 是可选关键词,后面跟着矩形的圆角半径。

polygon()

polygon用于创建多边形的剪裁路径,可以指定多个点来定义多边形的每个角,polygon(<fill-rule>, x1 y1, x2 y2, x3 y3)。

path()

path是用于定义一个复杂的剪裁路径。此函数使用SVG的路径语法来规定一个shape。

我们使用一个例子来介绍一下上述函数,其中图像集背景效果可以使用鼠标滚轮对页面缩放来观察效果

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>CSS图像和图形函数</title><style>div {float: left;width: 300px;height: 300px;background-size: cover;text-align: center;line-height: 300px;}.background-image {background-image: url('../img/example.jpg');}.background-image-set {background-image: image-set('../img/example2.jpg' 1x, '../img/example.jpg' 2x);}.clip-path-circle {background: pink;clip-path: circle(50% at 50% 50%);}.clip-path-ellipse {background: lightblue;clip-path: ellipse(50% 25% at 50% 50%);}.clip-path-inset {background: lightseagreen;clip-path: inset(50px 100px 30px 70px round 30px);}.clip-path-polygon {background: lightgreen;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}.clip-path-path {background: lightsalmon;clip-path: path('M10 80 Q 95 10 180 80 T 280 80');}</style>
</head><body><div class="background-image">背景图片</div><div class="background-image-set">图像集背景</div><div class="clip-path-circle">圆形裁剪</div><div class="clip-path-ellipse">椭圆裁剪</div><div class="clip-path-inset">矩形裁剪</div><div class="clip-path-polygon">多边形裁剪</div><div class="clip-path-path">复杂裁剪</div>
</body></html>

总结

文章对css的颜色,计算,图像和图形三类函数做了介绍,并且简述了它们的使用方式及效果,希望可以帮助到你。

最后,感谢你看到了这里,如果觉得本篇或者这个系列写的不错,还望三连支持一下,你的支持就是我创作的最大动力,谢谢!

相关代码

myCode: 基于js的一些小案例或者项目 - Gitee.com

参考

CSS 值函数 - CSS:层叠样式表 | MDN

<url> - CSS:层叠样式表 | MDN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统杂项(十)

目录 一、简述socket中select、epoll的使用场景和区别 1、使用场景 2、区别 二、epoll水平触发和边缘触发的区别 三、简述Reactor和Proactor模式 1、Reactor 2、Proactor 3、区别 四、简述同步和异步的区别&#xff0c;阻塞和非阻塞的区别 1、同步与异步 2、阻塞与非…

深入分析 Android ContentProvider (五)

文章目录 深入分析 Android ContentProvider (五)ContentProvider 的性能优化和实践案例1. 性能优化技巧1.1. 数据库索引优化示例&#xff1a;添加索引 1.2. 批量操作与事务管理示例&#xff1a;批量插入操作 1.3. 使用异步操作示例&#xff1a;使用 AsyncTask 进行异步查询 1.…

Linux:基础

一、安装 二、 一些组件 2.1 git管理 集中式版本控制系统:版本库是集中存放在中央服务器的,需要时要先从中央服务器取得最新的版本进行修改,修改后再推送给中央服务器。集中式版本控制系统最大的毛病就是必须联网才能工作,网速慢的话影响太大。 分布式版本控制系统:分布…

Linux网络-wget命令

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注我&#xff0c;我尽量把自己会的都分享给大家&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux服务器作为一个常用的网络服务器&#xff0c;主要的作用就是向客户端提供网络…

设计模式14-享元模式

设计模式14-享元模式 由来动机定义与结构代码推导特点享元模式的应用总结优点缺点使用享元模式的注意事项 由来动机 在很多应用中&#xff0c;可能会创建大量相似对象&#xff0c;例如在文字处理器中每个字符对象。在这些场景下&#xff0c;如果每个对象都独立存在&#xff0c…

PyCharm 2024.1.4:一站式教程与新特性解析

简介 PyCharm是由JetBrains开发的一款Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;自发布以来&#xff0c;凭借其强大的功能、智能的代码补全、广泛的插件支持和用户友好的界面&#xff0c;成为了Python开发者的首选工具之一。无论是数据科学、Web开发还是其他…

Redis - SpringDataRedis - RedisTemplate

目录 概述 创建项目 引入依赖 配置文件 测试代码 测试结果 数据序列化器 自定义RedisTemplate的序列化方式 测试报错 添加依赖后测试 存入一个 String 类型的数据 测试存入一个对象 优化 -- 手动序列化 测试存入一个Hash 总结&#xff1a; 概述 SpringData 是 S…

在 ArchLinux 上编译运行 axmol 引擎

本文将在 Windows 10 上安装 Arch WSL 中编译 axmol 请确保 WSL2 已正确安装 1. 在微软应用商店安装 ArchLinux 2. 打开 Arch&#xff0c;按照提示输入用户名和密码&#xff0c;尽量简单 3. 配置清华源&#xff0c;速度快的起飞&#xff0c;否则&#xff0c;各种包会安装失败…

光伏电站气象站:现代光伏系统的重要组成部分

光伏电站气象站&#xff0c;作为现代光伏系统的重要组成部分&#xff0c;集成了气象学、电子信息技术、数据处理与分析等多学科技术于一体&#xff0c;能够实时监测并记录包括温度、湿度、风速、风向、太阳辐射强度、降雨量在内的多种气象参数。这些数据不仅是评估光伏板发电效…

GLSL教程 第8章:几何着色器

目录 8.1 几何着色器的介绍 几何着色器的主要功能&#xff1a; 几何着色器的工作流程&#xff1a; 8.2 实现基本的几何变换 示例&#xff1a;将三角形扩展成多个三角形 8.3 几何着色器的高级应用 1. 粒子系统 2. 光晕效果 3. 线框模型 小结 几何着色器是图形管线中的一…

应用层自定义协议以及序列化和反序列化

文章目录 应用层自定义协议以及序列化和反序列化1、应用层自定义协议1.1、应用层1.2、协议 2、序列化和反序列化3、TCP 为什么支持全双工4、jsoncpp基础4.1、序列化4.2、反序列化 5、实现网络版计算器6、手写序列化和反序列化 应用层自定义协议以及序列化和反序列化 1、应用层…

爬取贴吧的标题和链接

免责声明 感谢您学习本爬虫学习Demo。在使用本Demo之前&#xff0c;请仔细阅读以下免责声明&#xff1a; 学习和研究目的&#xff1a;本爬虫Demo仅供学习和研究使用。用户不得将其用于任何商业用途或其他未经授权的行为。合法性&#xff1a;用户在使用本Demo时&#xff0c;应确…

智能算法驱动的爬虫平台:解锁网络数据的无限潜力

摘要 在信息爆炸的时代&#xff0c;网络数据如同深海宝藏&#xff0c;等待着有识之士发掘其无尽价值。本文将探索智能算法驱动的爬虫平台如何成为解锁这一宝库的关键&#xff0c;不仅剖析其技术优势&#xff0c;还通过实例展示它如何助力企业与开发者高效、稳定地采集数据&…

C语言 ——— 数组指针的定义 数组指针的使用

目录 前言 数组指针的定义 数组指针的使用 前言 之前有编写过关于 指针数组 的相关知识 C语言 ——— 指针数组 & 指针数组模拟二维整型数组-CSDN博客 指针数组 顾名思义就是 存放指针的数组 那什么是数组指针呢&#xff1f; 数组指针的定义 何为数组指针&#xf…

【QT】UDP

目录 核心API 示例&#xff1a;回显服务器 服务器端编写&#xff1a; 第一步&#xff1a;创建出socket对象 第二步&#xff1a; 连接信号槽 第三步&#xff1a;绑定端口号 第四步&#xff1a;编写信号槽所绑定方法 第五步&#xff1a;编写第四步中处理请求的方法 客户端…

JAVA开发工具IDEA如何连接操作数据库

一、下载驱动 下载地址&#xff1a;【免费】mysql-connector-j-8.2.0.jar资源-CSDN文库 二、导入驱动 鼠标右击下载到IDEA中的jar包&#xff0c;选择Add as Library选项 如图就导入成功 三、加载驱动 Class.forName("com.mysql.cj.jdbc.Driver"); 四、驱动管理…

【C++】——红黑树(手撕红黑树,彻底弄懂红黑树)

目录 前言 一 红黑树简介 二 为什么需要红黑树 三 红黑树的特性 四 红黑树的操作 4.1 变色操作 4.2 旋转操作 4.3 插入操作 4.4 红黑树插入代码实现 4.5 红黑树的删除 五 红黑树迭代器实现 总结 前言 我们之前都学过ALV树&#xff0c;AVL树的本质就是一颗平…

计算机实验室排课查询小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;实验室信息管理&#xff0c;实验室预约管理&#xff0c;取消预约管理&#xff0c;实验课程管理&#xff0c;实验报告管理&#xff0c;报修信息管理&#xff0…

Linux的yum源安装MySQL5.7

linux的yum源安装MySQL5.7 一、MySQL 1、简介 MySQL 是一种流行的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;由瑞典公司 MySQL AB 开发&#xff0c;后来被 Oracle Corporation 收购。它是一个开源软件&#xff0c;提供了高效、稳定和可靠的数据管理解决…

Spring AI (三) 提示词对象Prompt

3.提示词对象Prompt 3.1.Prompt Prompt类的作用是创建结构化提示词, 实现了ModelRequest<List<Message>>接口 Prompt(String contents)&#xff1a;创建一个包含指定内容的Prompt对象。 Prompt(String contents, ChatOptions modelOptions)&#xff1a;创建一个…