CSS常用函数整理

1. 计算 calc()

这个感觉是最常用也最实用的的一个方法。
这个函数，可用在如，左右布局，一边宽度固定，另一边撑开左右宽的情景。
calc() 函数用于动态计算长度值。
calc(数学表达式)
如：width:calc(100% - 20px);

  
z
  
wk

2.attr() 获取标签属性

attr(属性名) 获取当前所在选择器的标签的属性值，参数就是属性名，不用加引号。

 abc

3. 渐变背景色属性值

• linear-gradient()
  用于创建一个线性渐变的 “图像”。

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

值	描述
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,…	用于指定渐变的起止颜色。

• radial-gradient()
  用径向渐变创建 “图像”。

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

值	描述
shape	确定圆的类型。ellipse (默认): 指定椭圆形的径向渐变；circle ：指定圆形的径向渐变
size	定义渐变的大小。arthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角；closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边； closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角； farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置。可能值： center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color	用于指定渐变的起止颜色。

• repeating-linear-gradient()
  用于创建重复的线性渐变 “图像”。
  background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

• repeating-radial-gradient()
  具体属性值的使用可参考 https://www.html.cn/book/css/values/image/repeating-radial-gradient().htm ，深入研究。

注：
以上理论内容参考：
https://www.html.cn/book/css/values/image/linear-gradient().htm