做网站需多少钱,如何自己安装wordpress,建设一个公司网站需要多少钱,上海网站建设求职简历前言
本文收录于CSS系列文章中#xff0c;欢迎阅读指正
在计算机编程中#xff0c;函数有着重要的作用和意义#xff0c;它可以实现封装#xff0c;复用#xff0c;模块化#xff0c;参数等功能效果#xff0c;在如何在CSS中写变量#xff1f;一文带你了解前端样式利…前言
本文收录于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 langzh-CNheadmeta charsetUTF-8titleCSS颜色函数/titlestyle.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
/headbodydiv classcolor-box rgb这是一个背景为RGB颜色的div。/divdiv classcolor-box rgba这是一个背景为带透明度的RGBA颜色的div。/divdiv classcolor-box hsl这是一个背景为HSL颜色的div。/divdiv classcolor-box hsla这是一个背景为带透明度的 HSLA 颜色的 div。/divdiv classcolor-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 langzhheadmeta charsetUTF-8titleCSS计算函数/titlestyle: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
/headbodydiv classcontainerdiv classdynamic-width文字框宽度动态计算/divdiv classdefault-width使用默认宽度/divdiv classmin-max-example此框体的宽度不小于300px且不超过父容器的50%高度为150px或父容器的25%取较小值。/divdiv classclamp-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-percentageround: 是可选关键词后面跟着矩形的圆角半径。
polygon()
polygon用于创建多边形的剪裁路径可以指定多个点来定义多边形的每个角polygon(fill-rule, x1 y1, x2 y2, x3 y3)。
path()
path是用于定义一个复杂的剪裁路径。此函数使用SVG的路径语法来规定一个shape。
我们使用一个例子来介绍一下上述函数其中图像集背景效果可以使用鼠标滚轮对页面缩放来观察效果
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8titleCSS图像和图形函数/titlestylediv {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
/headbodydiv classbackground-image背景图片/divdiv classbackground-image-set图像集背景/divdiv classclip-path-circle圆形裁剪/divdiv classclip-path-ellipse椭圆裁剪/divdiv classclip-path-inset矩形裁剪/divdiv classclip-path-polygon多边形裁剪/divdiv classclip-path-path复杂裁剪/div
/body/html 总结
文章对css的颜色计算图像和图形三类函数做了介绍并且简述了它们的使用方式及效果希望可以帮助到你。
最后感谢你看到了这里如果觉得本篇或者这个系列写的不错还望三连支持一下你的支持就是我创作的最大动力谢谢
相关代码
myCode: 基于js的一些小案例或者项目 - Gitee.com
参考
CSS 值函数 - CSS层叠样式表 | MDN
url - CSS层叠样式表 | MDN
