|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
簡(jiǎn)單實(shí)例解釋：background:-webkit-gradient() color-stop()
作者:admin 時(shí)間:2022-3-29 22:17:40 瀏覽:我今天在學(xué)習(xí)CSS漸變背景時(shí)，看到-webkit-gradient()里有個(gè)屬性值是color-stop()，一開始不是很理解，于是查閱了一些資料，了解到了有關(guān)color-stop()的一些知識(shí)。如果你也正在學(xué)習(xí)這方面的知識(shí)，那么本文或許合適你，本文將通過(guò)一個(gè)簡(jiǎn)單的實(shí)例，來(lái)解釋color-stop()的含義及其用法。
color-stop()實(shí)例介紹
我們看一看下面的實(shí)例代碼。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: 50px 50px;
width: 350px;
height: 200px;
}
.test{
background: -webkit-gradient(linear, 0 0, 0 100%, from(blue), color-stop(8%, white), color-stop(20%,red),to(yellow));
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
運(yùn)行結(jié)果
代碼解釋
該實(shí)例主要是學(xué)習(xí)-webkit-gradient()以及color-stop()的使用。
上圖的標(biāo)識(shí)很好的解釋了color-stop()參數(shù)值的含義。color-stop(a,b)有兩個(gè)參數(shù)，a是表示偏移量<小數(shù)或百分比>，比如.2或20%，意思是一樣的；b是表示顏色，如#FF0000或red都是表示紅色，兩個(gè)寫法都可以，意思是，在這個(gè)位置開始，出現(xiàn)這個(gè)顏色。但前后兩種顏色不是瞬間轉(zhuǎn)換，而是有個(gè)漸變過(guò)程，前面一種顏色從深到淺直至消失，后一種顏色則是由淺到深。上圖例看到，8%-20%，是白色到紅色的逐漸轉(zhuǎn)變過(guò)程。
通過(guò)這樣的解釋，你現(xiàn)在應(yīng)該已經(jīng)了解color-stop()各參數(shù)的意義及其用法了。
background:-webkit-gradient()背景漸變屬性
該實(shí)例中，用的是background:-webkit-gradient()這個(gè)背景漸變屬性，這是webkit內(nèi)核的safari、Chrome的Linear Gradients (線性漸變) ，其語(yǔ)法結(jié)構(gòu)是：
background-image:-webkit-gradient(type,x1 y1, x2 y2, from(開始顏色值),to(結(jié)束顏色值), [color-stop(偏移量小數(shù),?？款伾?,...] );
-webkit-gradient是background的一個(gè)屬性值。
-webkit-gradient第一組參數(shù)type（類型）為 linear（線性）。
-webkit-gradient第二組參數(shù)是x1 y1, x2 y2當(dāng)成顏色漸變體的兩個(gè)點(diǎn)的坐標(biāo)。x1，x2，y1，y2的取值范圍為0%-100%，當(dāng)x1，x2，y1，y2取值為極值的時(shí)候，x1和x2可以取值left（或0%）或right（或100%），y1和y2可以取值top（或0%）或bottom（或100%）。
垂直漸變和水平漸變漸變時(shí)，x1和x2可以最簡(jiǎn)單的取值是left（或0%）或right（或100%），y1和y2可以最簡(jiǎn)單的取值是top（或0%）或bottom（或100%）。
from(開始顏色值)，to(結(jié)束顏色值)是兩個(gè)漸變顏色值。
[color-stop(偏移量<小數(shù)>,?？款伾?,...]：可以使用多個(gè)color-stop，如果漸變只有2個(gè)顏色，那么可以不使用該參數(shù)；偏移量必須為大于0且小于1的小數(shù)（可用百分比表示），如果偏移量>=1,那么該color-stop相當(dāng)于無(wú)效。
總結(jié)
本文詳細(xì)介紹了css color-stop()的含義及用法，通過(guò)本文的學(xué)習(xí)，你應(yīng)該對(duì)color-stop()有了一定的了解，并能夠在實(shí)踐中運(yùn)用它。本文同時(shí)介紹了-webkit-gradient()背景顏色屬性的語(yǔ)法及各項(xiàng)參數(shù)的含義。
您可能對(duì)以下文章也感興趣
標(biāo)簽: color-stop css3
- 4個(gè)實(shí)例演示——美化表單input輸入框CSS樣式
- 4款CSS 3D按鈕點(diǎn)擊過(guò)渡效果
- 純CSS實(shí)現(xiàn)具有漸變和圓角的彩色邊框
- 10款純CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】
- CSS+SVG：畫圓并且文字寫在圓中間
- CSS實(shí)現(xiàn)自右向左的豎向文字排布
- CSS+SVG實(shí)現(xiàn)環(huán)形/圓環(huán)文字效果【簡(jiǎn)單實(shí)例】
- 純CSS實(shí)現(xiàn)環(huán)形文字效果
- css text-shadow 輕松實(shí)現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光效果
- 純CSS：點(diǎn)擊輸入框時(shí)，標(biāo)簽（占位符）浮動(dòng)可見
- 純CSS實(shí)現(xiàn)文字漸變和文字掃光動(dòng)畫效果
- 強(qiáng)！純CSS實(shí)現(xiàn)彈窗功能，不用JS
- CSS實(shí)現(xiàn)：固定Table表頭和表腳
- 純CSS制作各種Charts圖
- CSS實(shí)現(xiàn)文字顏色漸變效果
- 站長(zhǎng)推薦
