常用的Css函数

栏目: CSS · 发布时间: 5年前

内容简介:用来选择元素的属性值,用法:attr(html元素的属性名),正常搭配css content一起使用用于动态计算长度值 calc(数学表达式)用于 创建一个线性渐变的 图像,需要设置一个起点一个方向,还可以定义角度起始颜色等。
常用的Css函数

1. attr()

用来选择元素的属性值,用法:attr(html元素的属性名),正常搭配css content一起使用

html:

<p><a href="http://a.b.c" name="attr">十</a></p>
<p><a href="http://d.f.e" name="我是谁">九</a></p>

css:

a:after{content:'('attr(href) '/' attr(name) ')'}


结果:
    
十(http://a.b.c / attr)
九(http://d.f.e / 我是谁)
复制代码

2. calc()

用于动态计算长度值 calc(数学表达式)

  • 运算符前后需要有空格

  • 不管什么长度都可以用calc计算

  • calc() 支持 '+','-','*','/' 等运算

  • calc() 使用标准的数学运算优先级规则

    语法:

    width: calc(70% - 60px) height: calc(70% / 2 * 12 + 66px)

3. linear-gradient()

用于 创建一个线性渐变的 图像,需要设置一个起点一个方向,还可以定义角度起始颜色等。

语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: 指定渐变方向的角度 (可以省略)
color-stop1: 指定渐变的起止颜色
复制代码

示例:

background: linear-gradient(red,yellow,blue,green); 

// 结果如下,在未设置渐变角度是自上而下的
复制代码
常用的Css函数

示例:

background: linear-gradient(12deg,red,yellow,blue,green); 

// 结果如下,设置渐变角度后
复制代码
常用的Css函数

示例:

background: linear-gradient(to left top,red,yellow,blue,green);  

// 结果如下,渐变角度可以从某个方向到另外一个方向
复制代码
常用的Css函数
  1. radial-gradient()

用法和linear-gradient()差不多,只不过它是用径向渐变创建图像,渐变由中心点定义,必须设置两个终止色(区别)

语法:

background: radial-gradient(shape size at position, start-color, ..., last-color);

shape: 确定圆的类型(选填)
    
    - ellispe(默认): 指定椭圆形的径向渐变
    - circle: 指定圆形的径向渐变

size: 指定径向渐变的大小(选填)

    - farthest-corner(默认): 指定径向渐变的半径长度为从圆心到离圆心最远的角 
    - closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边
    - closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角
    - farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边

position: 定义渐变的位置(选填)
    
    - center(默认):设置中间为径向渐变圆心的纵坐标值
    - top:设置顶部为径向渐变圆心的纵坐标值
    - bottom:设置底部为径向渐变圆心的纵坐标值

start-color, ..., last-color:定义渐变的起止色
复制代码

示例:

background: radial-gradient(red, green, blue, yellow);   

// 结果如下,渐变从中心往外扩散
复制代码
常用的Css函数

示例:

background: radial-gradient( red 5%, green 10%, blue 15%,yellow 20%);   

// 结果如下,可以单独设置每个颜色的占比
复制代码
常用的Css函数

示例:

background: radial-gradient(circle, red, green, blue, yellow);  

// 结果如下,径向渐变设置为圆形,默认为椭圆形
复制代码
常用的Css函数

5. repeating-linear-gradient()

创建重复的线性渐变图像

语法:

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

angle: 定义渐变角度(0deg-360deg,默认180deg)
    
side-or-corner: 指定线性渐变起始位置(顺序随意)

    - 关键字一: 水平位置(left,right)
    - 关键字而: 垂直位置(top,bottom)

color-stop1, color-stop2,... 
    
    - 指定渐变的起止颜色,由颜色值、停止位置(可选,使用百分比指定)组成
复制代码

示例:

background: repeating-linear-gradient(red, yellow 10%, green 20%); 

// 结果如下,默认自上而下,以及设置颜色的占比
复制代码
常用的Css函数

示例:

background: repeating-linear-gradient(30deg, red 5%, yellow 10%, green 20%);

// 结果如下,设置角度后的效果
复制代码
常用的Css函数
常用的Css函数

欢迎关注 公众号【小夭同学】

ES6入门系列

ES6入门之let、cont

ES6入门之变量的解构赋值

ES6入门之字符串的扩展

ES6入门之正则的扩展

ES6入门之数值的扩展

Git教程

前端Git基础教程


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解网络硬件

图解网络硬件

[日] 三轮贤一 / 盛荣 / 人民邮电出版社 / 2014-7 / 69.00元

本书详细介绍了计算机网络硬件的相关知识,在对硬件设备、相关技术及规范进行详尽考据和整理的同时,侧重工程实践,重点讲述了在实际网络建设工程中真实使用的网络硬件设备及其相关背景知识,能够帮助读者深入理解计算机网络在工程实践中某些容易混淆的概念,如L3交换机和路由器等。 本书在讲解的同时,还辅以丰富的图例,使计算机网络设备的真实情况一目了然,同时深入浅出地介绍了原本复杂抽象的计算机网络术语,因此对......一起来看看 《图解网络硬件》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具