CSS函数
css 有以下几个常用的函数
| 函数 | 描述 |
|---|---|
| attr() | 返回选择元素的属性 |
| calc() | 返回计算后的css的属性值,可以动态的计算元素的长度或者宽度. |
| linear-gradient() | 创建一个线性渐变的图像(给元素设置渐变的背景色) |
| radial-gradient() | 创建一个径向渐变的图像(发散渐变) |
| repeating-linnear-gradient() | 用重复的线性渐变创建图像 |
| repeating-linnear-gradient() | 用重复的径向渐变创建图像 |
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相关的函数