CSS函數

css 有以下幾個常用的函數

css 的函數的實踐
查看渲染效果
css參考手冊

  <a href=
 
"https://codepen.io/sialia/project/editor/Xprdmv">點我,鏈接是我的href屬性</a>
  <script src="scripts/index.js"></script>
  <div class="linear-box">
    css漸變函數linear-gradient()
  </div>
  <div class="repeating-linear-box">
    css漸變函數repeating-radial-gradient()
  </div>
  <div
 
 class="repeating-radial-box">
    css漸變函數repeating-radial-gradient()
  </div>
  <div class="radial-box">
    css漸變函數repeating-radial-gradient()
  </div>
  <div class="t1"></div>  
  <div class="t2"></div>

以下是css樣式

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(to bottom left, #f24980 10%, #de5894 15%);
}
.t2 {
  background: repeating-linear-gradient(130deg, #f00, #de5d45 10%, #de5456 15%);
}

語法

calc() = calc(四則運算)

說明

用於動態計算長度值。
需要註意的是，運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；
----------------------------------------------------------
其它函數的具體使用說明
image相關的函數

css函數總結