CSS中的函数-爱代码爱编程
CSS中也有函数,我们也会经常用到,今天我就来罗列一下CSS中所有的函数
先从CSS2说起
在CSS2中有两个函数,这两个函数有一个使我们经常用到的
rgb() | 使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。 |
attr() | 返回选择元素的属性值。 |
它有一个必须值,这个值必须是HTML元素的属性名,我们来看个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attr</title>
<style>
a:after {content: " (" attr(href) ")";}
</style>
</head>
<body>
<p><a href="https://www.dzyong.com">邓占勇的个人网站</a></p>
<p><strong>注意:</strong> IE8 需要声明 !DOCTYPE 才可以支持 attr() 函数。</p>
</body>
</html>
运行结果:
这可以使得我们在HTML中灵活的控制CSS,可以动态调整样式,比如传入一个数值来动态设置它的背景颜色。
CSS3中
如rgb()相比,它可以传入第4个参数,来设置颜色的透明度。
- 红色(R)0 到 255 间的整数,代表颜色中的红色成分。。
- 绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。
- 蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。
- 透明度(A)取值 0~1 之间, 代表透明度。
hsl() | 使用色相、饱和度、亮度来定义颜色。 |
hsla() | 使用色相、饱和度、亮度、透明度来定义颜色。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hsla</title>
<style>
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
</style>
</head>
<body>
<p>HSL 颜色,并使用透明度:</p>
<p id="p1">绿色</p>
<p id="p2">浅绿</p>
<p id="p3">暗绿</p>
<p id="p4">柔和的绿色</p>
<p id="p5">紫色</p>
<p id="p6">柔和的紫色</p>
</body>
</html>
linear-gradient() 与 radial-gradient()
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
注意: Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。
direction | 用角度值指定渐变的方向(或角度)。 |
color-stop1, color-stop2,... | 用于指定渐变的起止颜色。 |
radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape | 确定圆的类型:
|
size | 定义渐变的大小,可能值:
|
position | 定义渐变的位置。可能值:
|
start-color, ..., last-color | 用于指定渐变的起止颜色。 |
repeating-linear-gradient() 与 repeating-radial-gradient()
与前面两个渐变不同,这两个可创建重复性渐变,直接看例子
background-image: repeating-linear-gradient(45deg,red,blue 7%,green 20%);
这里的7%与20%表示颜色终止的位置,可看到最大的值为20%,所以整个渐变重复了5次。
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
ubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。
这个函数有什么用呢,我们常在动画过度中使用这个函数 ,来自定义动画进度。
注意: Internet Explorer 9 及其更早版本的浏览器不支持该效果。
var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
这个函数我觉得是非常方便实用的一个函数,类似于sass、stylus、less等预处理其中的变量,对于一个多处用到的值我们可以单独定义出来,方便后期的维护。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>var</title>
<style>
:root {
--main-bg-color: pink;
}
#div1 {
background-color: var(--main-bg-color);
padding: 5px;
}
#div2 {
background-color: var(--main-bg-color);
padding: 5px;
}
#div3 {
background-color: var(--main-bg-color);
padding: 5px;
}
</style>
</head>
<body>
<h1>var() 函数</h1>
<div id="div1">邓占勇的个人网站(www.dzyong.com)</div>
<br>
<div id="div1">邓占勇的个人网站(www.dzyong.com)</div>
<br>
<div id="div1">邓占勇的个人网站(www.dzyong.com)</div>
</body>
</html>
calc()
calc() 函数用于动态计算长度值。
- 需要注意的是,运算符前后都需要保留一个空格,例如:
width: calc(100% - 10px)
; - 任何长度值都可以使用calc()函数进行计算;
- calc()函数支持 "+", "-", "*", "/" 运算;
- calc()函数使用标准的数学运算优先级规则;
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/DengZY926/article/details/104123095