卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 技术 › CSS函数

CSS函数

坚果大叔
2019-04-09 9:55:40技术阅读数 204

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函数-卖坚果的怪叔叔

4. 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函数
赞赏 赞(0)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
ES6入门之数值的扩展
上一篇
ES6入门之函数的扩展
下一篇
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 🌚🌚🌚🌚
  • TS文档
  • 密码保护:暂存
  • deep 不生效!
  • 过去的,一点记录!
归档
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
🌚🌚🌚🌚
2022-05-17 22:12:24
75 3 0
TS文档
2022-05-11 21:09:30
79 0 1
密码保护:暂存
2022-05-11 10:21:14
57 0 0
deep 不生效!
2022-05-03 14:37:52
180 1 1
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
192
文章
47
评论
111
喜欢