样式: CSS: Functions

[xvno]

函数列表

Function	Description
rgba()	Defines colors using the Red-Green-Blue-Alpha model (RGBA)
rgb()	Defines colors using the Red-Green-Blue model (RGB)
attr()	Returns the value of an attribute of the selected element
calc()	Allows you to perform calculations to determine CSS property values
cubic-bezier()	Defines a Cubic Bezier curve
linear-gradient()	Sets a linear gradient as the background image. Define at least two colors (default: top to bottom)
radial-gradient()	Sets a radial gradient as the background image. Define at least two colors (center to edges)
hsl()	Defines colors using the Hue-Saturation-Lightness model (HSL)
hsla()	Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)

Rarely Used	...
var()	Inserts the value of a custom property
repeating-linear-gradient()	Repeats a linear gradient
repeating-radial-gradient()	Repeats a radial gradient

样例

rgba 定义带opacity的rgb颜色

rgba(red, green, blue, alpha)

#p1 {background-color:rgba(255,0,0,0.3);} /* red with opacity*/

<p id="p1">Red</p>

attr() 获取本元素的某个属性

a:after {
  content: " (" attr(href) ")";
}

<a href="http://vno.io">VNO's</a>

calc()

width: calc(100% - 100px);

cubic-bezier

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

div:hover {
  width:300px;
}

<div></div>

linear-gradient(direction, color-stop1, color-stop2, ...)

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

div {
 height: 50px;
}
#grad1 {
  background-image: linear-gradient(red, yellow, blue);
}
#grad2 {
  background-image: linear-gradient( 45deg, red, yellow, blue);
}

<div id="grad1"></div>
<div id="grad2"></div>

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

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

• shape: 默认为ellipsis, 另一个值为circle
• size: farthest-corner (default) closest-side closest-corner farthest-side
• position:

<div id="grad1"></div>

#grad1 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(circle, red, yellow, green);
}

var()

:root {
  --main-bg-color: coral;  
}

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