CSS 圖像高級 CSS 漸變
CSS 漸變
CSS 漸變是在 CSS3 Image Module 中新增長的 <image> 類型。css
使用 CSS 漸變能夠在兩種顏色間製造出平滑的漸變效果。用漸變代替圖片，能夠加快頁面的載入時間、減少帶寬佔用。html
同時，由於漸變是由瀏覽器直接生成的，漸變在頁面縮放時的效果比圖片更好，能夠更加靈活、便捷的調整頁面佈局。編程
瀏覽器支持兩種類型的漸變：瀏覽器
- 線性漸變 (linear)，經過 linear-gradient 函數定義
- 徑向漸變 (radial)，經過 radial-gradient 函數定義
線性漸變
linear-gradient() 函數用於建立一個表示兩種或多種顏色線性漸變的圖片。其結果屬於<gradient>數據類型，是一種特別的<image>數據類型。函數
linear-gradient函數的語法：佈局
|
1
|
linear-gradient (方向或角度,顏色
1
,顏色
2
,...顏色n,背景圖片)
|
其中背景圖片是可選的。url
下面的代碼演示了線性漸變的用法。spa
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>線性漸變</
title
>
<
style
type
=
"text/css"
>
body{
padding:20px;
}
div{color:#fff;}
div.one{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(to bottom, blue, white);
}
div.two{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(to right, blue, white);
}
div.three{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(30deg, #000, #ff0000);
}
div.four{
width:100%;
height:150px;
border:1px solid #000;
background: linear-gradient(to right, red, orange, yellow, green,white, blue);
}
div.five{
color:#000;
width:418px;
height:150px;
border:1px solid #000;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),
}
</
style
>
</
head
>
<
body
>
<
h1
>軟件開發，成就夢想</
h1
>
<
div
class
=
"one"
>從上到下</
div
>
<
div
class
=
"two"
>從左到右</
div
>
<
div
class
=
"three"
>角度 30度</
div
>
<
div
class
=
"four"
>色標</
div
>
<
div
class
=
"five"
>背景圖片漸變</
div
>
</
body
>
</
html
>
計算結果：code
色標，在漸變中，能夠使用兩種以上的顏色，這就是色標。htm
漸變加透明，效果更好，透明是經過背景顏色來實現，其中0是不透明，1是100%透明。
相關文章
- 1. CSS漸變
- 2. css漸變
- 3. css漸變色
- 4. css漸變/背景
- 5. CSS背景漸變
- 6. 漸變 CSS linear-gradient
- 7. css背景漸變
- 8. css動畫漸變
- 9. css 漸變文字
- 10. css線性漸變
- 更多相關文章...
- • CSS 指南 - 網站建設指南
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。