CSS Function Summary

CSS functions

There are several common functions of CSS:

function	Description
attr ()	Returns the properties of the selected element
Calc ()	Returns the computed CSS property values, which can be used to dynamically calculate the length or width of the element.
Linear-gradient ()	Creates an image of a linear gradient (sets the background color of the gradient to the element)
Radial-gradient ()	Create an image of a radial gradient (diverging gradients)
Repeating-linnear-gradient ()	Create an image with a repeating linear gradient
Repeating-linnear-gradient ()	Create an image with a repeating radial gradient

The practice of CSS functions
View Rendering Effects
CSS Reference Manuals

  <ahref="HTTPS://CODEPEN.IO/SIALIA/PROJECT/EDITOR/XPRDMV">Point me, link is my href attribute</a>  <scriptsrc="Scripts/index.js"></script>  <divclass="Linear-box">CSS gradient function linear-gradient ()</div>  <divclass="Repeating-linear-box">CSS gradient function repeating-radial-gradient ()</div>  <divclass="Repeating-radial-box">CSS gradient function repeating-radial-gradient ()</div>  <divclass="Radial-box">CSS gradient function repeating-radial-gradient ()</div>  <divclass="T1"></div>    <divclass="T2"></div>

Here is the CSS style

A: After {  content: ' "'attr (HREF)' "';}. T1,. T2,. Linear-box,. Repeating-linear-box,. Repeating-radial-box,. Radial-box{  Width: 400px;  Height: 400px;  text-align: Center;  Line-height:400px;  Margin-top: 50px;  Border-radius:50%;}. Linear-box{  background:Linear-gradient (#f01f98,#8490da,#28a943);}. Radial-box {  background:Radial-gradient (#d358da,#785a54,#890123);}. Repeating-radial-box {  background:Repeating-radial-gradient (#131545 20%,Red 10%,#ea8943 30%);}. Repeating-linear-box {  background:Repeating-radial-gradient (#f00,#ff0 10%,#f00 15%,#ff0 25%,#f00 30%,#ff0 40%,#f00 45%,#ff0 55%,#f00 60%,#ff0 70%,#f00 75%,#ff0 85%,#f00 90%,#ff0);}. T1 {  background:Repeating-linear-gradient (ToBottom  Left,#f24980 10%,#de5894 15%);}. T2 {  background:Repeating-linear-gradient (130deg,#f00,#de5d45 10%,#de5456 15%);}

Grammar

Calc () = Calc (arithmetic)

Description

Used to dynamically calculate length values.
Note that you need to keep a space before and after the operator, for example: Width:calc (100%-10px);
Any length value can be calculated using the Calc () function;
The Calc () function supports "+", "-", "*", "/" operations;
The Calc () function uses standard mathematical precedence rules;
----------------------------------------------------------
Specific instructions for using other functions
Image-related functions

CSS Function Summary