代码编织梦想

CSS中也有函数,我们也会经常用到,今天我就来罗列一下CSS中所有的函数

 

先从CSS2说起

在CSS2中有两个函数,这两个函数有一个使我们经常用到的 

rgb()

rgb()使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。

attr()

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中

rgba()

如rgb()相比,它可以传入第4个参数,来设置颜色的透明度。

  • 红色(R)0 到 255 间的整数,代表颜色中的红色成分。。
  • 绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。
  • 蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。
  • 透明度(A)取值 0~1 之间, 代表透明度。

hsl() 与 hsla()

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确定圆的类型:
  • ellipse (默认): 指定椭圆形的径向渐变。
  • circle :指定圆形的径向渐变
size定义渐变的大小,可能值:
  • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
  • closest-side :指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner : 指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side :指定径向渐变的半径长度为从圆心到离圆心最远的边
position定义渐变的位置。可能值:
  • center(默认):设置中间为径向渐变圆心的纵坐标值。
  • top:设置顶部为径向渐变圆心的纵坐标值。
  • bottom:设置底部为径向渐变圆心的纵坐标值。
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%);

cubic-bezier()

ubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。贝塞尔曲线曲线由四个点 P0,P1,P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是(0,0)并且表示初始时间和初始状态,P3是(1,1)并且表示最终时间和最终状态。

 

这个函数有什么用呢,我们常在动画过度中使用这个函数 ,来自定义动画进度。

注意: Internet Explorer 9 及其更早版本的浏览器不支持该效果。

 

var()

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

Jsp实现注册登录以及忘记找回密码等操作(上)-爱代码爱编程

刚开始做WEB项目的小伙伴遇到的第一个难关,可能就是做一个能够实现与数据库连接后用于注册,登录,找回密码的界面。今天博主就用一个小项目带领大家实现这个项目,让大家在实战中理解网页如何与数据库连接,如何随机生成验证码并且发送到邮箱,运用sql命令进行数据的增删改查等操作。 那么我们先做的准备工作是:准备好tomcat,在eslipse搭建好环境.熟悉好es

!important属性-爱代码爱编程

作用:提升属性的权重,其值为无穷大。 格式: 属性:值 !important; 注意: 1、!important提升的是属性的权重,而不能提升选择器的权重 2、!important不能提升继承过来的权重 <!DOCTYPE html> <html lang="en"> <head> <meta

javacript获取时间小案例-爱代码爱编程

@ Javascript 获取时间案例 html加css <div> 现在是北京时间<br> <span></span> </div> div{ width: 200px; height: 60px; border: 1

前端特效-霓虹灯按钮-爱代码爱编程

半年前看到了一个炫酷的前端特效,忘了在哪看的了但是觉得很好看,今天发在这给大家康康。QWQ 这个是我做好的预览图 前端小特效-霓虹灯按钮预览 按钮的html很简单。四个span用来做环绕的特效,href用来链接下面用来显示。套一个a标签就完成了。 <a href="#"> <span></span&

HTML+CSS基础知识 - 1.2 CSS选择器+常用属性+高级应用-爱代码爱编程

创建一个HTML文件、一个CSS文件,用户将CSS文件链接到HTML文件时,在HTML5页面的标记中(or head与body标记之间)添加以下代码:<link rel="stylesheet" type="text/css" href="css文件地址"> 一、CSS3中的选择器 1.属性选择器: [att=val]{} 属性=属性值

利用js点击小眼睛图片实现转换明文暗码的效果-爱代码爱编程

明文暗码:实际上就是密码框和文本框的切换. 看到别人输入密码的时候 旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了. HTML和css代码块 <style> .box{ position: relative; width: 30

前端需要知道的CSS函数大全-爱代码爱编程

之前一直以为css没有几个函数,今天才发现css现在竟然已经有86个函数了,意不意外,惊不惊喜!!! 我一直比较喜欢用css来解决之前js实现的效果,这样对性能时一种优化,自己也有成就感,希望这些函数能够更多的应用到自己的项目中,向张鑫旭老师学习做一些惊艳的效果出来把css玩出花   根据w3cplus中可以划分为以下几类: 属性函数:attr()