css函數總結
阿新 • • 發佈:2018-03-24
after 背景色 rip image tab http otto 返回 數學運算
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相關的函數
css函數總結