CSS 函数

颜色

rgba()

• rgba(）函数使用红（R)，绿（G)，蓝（B)，透明度（A）的叠加来生成各式各样的颜色。
• RGBA 即红色，绿色，蓝色，透明度（英语：Red, Green, Blue,Alpha)
  • **红色（R)**0 到 255 间的整数，代表颜色中的红色成分。
  • **绿色（G)**0 到 255 间的整数，代表颜色中的绿色成分。
  • **蓝色（B)**0 到 255 间的整数，代表颜色中的蓝色成分。
  • **透明度（A)**取值 0~1 之间，代表透明度。

rgba(red, green, blue, alpha)

值	描述
red	定义红色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%,
green	定义绿色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%,
blue	定义蓝色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%,
alpha - 透明度	定义透明度 0（透完全明） ~ 1（完全不透明）

linear-gradient()

• 线性渐变。
• 渐变的实现由两部分组成：渐变线和色标。
• 浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变，通过确定多个色标可以制作多色渐变效果。

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

• color-stop：色标包含一个颜色值和一个位置，用来控制渐变的颜色变化，color 百分比/长度
• direction：渐变线用来控制发生渐变的方向，to left/right/top/bottom 直线，to left/right/top/bottom left/right/top/bottom 对角。
• angle：角度。

实例

.foo {
    width: 200px;
    height: 100px;
    background: linear-gradient(to right, green, white 10%, yellow);
    /* background: linear-gradient(to right, green, white 20px, yellow); 等同 */
}

• 中间的白色从容器10%的位置开始渐变，挤压了绿色区域。

• 动态渐变。

<div class="dynamics"></div>

.dynamics {
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #944fa8, #496eaa);
    background-size: 1400% 300%;
    animation: dynamics 20s ease infinite;
    -webkit-animation: dynamics 20s ease infinite;
    -moz-animation: dynamics 20s ease infinite;
}
@keyframes dynamics {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}

radial-gradient()

• 径向渐变。

background-image: radial-gradient(shape size at position, color-stop1, color-stop2,...);

• shape：图形。
  • ellipse （默认）：椭圆形。
  • circle：圆形。
• size：定义渐变的大小。
  • farthest-corner （默认） ：指定径向渐变的半径长度为从圆心到离圆心最远的角。
  • closest-side：渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）
  • closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角。
  • farthest-side：与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）
• position:position与background-position或者transform-origin类似，如缺省，默认为中心点center
• color-stop：色标包含一个颜色值和一个位置，用来控制渐变的颜色变化，color 百分比/长度

实例

.foo {
    background-image: radial-gradient(ellipse farthest-corner at 80px 50px, red, yellow, green);
}

• 唱片效果。

<div class='record'></div>
.record {
    position: relative;
    margin: 0 auto;
    width: 260px; height: 260px;
    border-radius: 50%;
    background:
        linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0,
        linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%,
        repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
    box-shadow: 5px 10px 20px #ccc;
}
.record:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33,
        inset 0 0 0 27px #da5b33;
    background: #fff;
    content: '';
}

计算

var()

var(）函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

var(custom-property-name, value)

值	描述
custom-property-name	必需，自定义属性的名称，必需以 – 开头，
value	可选，备用值，在属性不存在的时候使用，

实例

使用 var(）函数调用多个自定义的值：

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

calc()

calc(）函数用于动态计算长度值。

calc(expression)

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
• 任何长度值都可以使用calc(）函数进行计算;
• calc(）函数支持 “+”, “-”, “*”, “/” 运算;
• calc(）函数使用标准的数学运算优先级规则;

实例

#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}