css3顏色漸層：css3如何實現背景顏色漸層？-css教學-PHP中文網

线性渐变 - 从上到下

径向渐变

首頁

web前端

css教學

css3顏色漸層：css3如何實現背景顏色漸層？

不言

Sep 15, 2018 pm 01:42 PM

css3 背景顏色漸層

為了開發網頁的美觀，css3背景顏色漸層是常會用到的，那麼，css3背景顏色漸層如何設定呢？本篇文章我們就來介紹關於css顏色漸層背景的設定方法。

我們要知道的是css3漸層有兩種：css3線性漸層和css3徑向漸層，就來看看這兩種css3漸層實現背景色彩漸層的效果是怎樣的。

一、css3線性漸層設定的背景色彩漸層

#首先我們要知道css3線性漸層所用的性質是linear-gradient。

語法：linear-gradient(to bottom,colorStrat,colorEnd)

參數意義：

第一個參數指定漸層的方向

#to bottom 從上到下；to bottom right 由左上至右下；to right 由左至右；to up right 由左下至右上；

to up 由下至下；to up left 從右下至左上；to left 由右至左；to bottom left 從右上至左下

第二個參數指定漸變色的開始顏色

第三個參數指定漸變色的結束顏色

實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(yellow, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(yellow, green)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(yellow, green)); /* Firefox 3.6 - 15 */
    background: linear-gradient(yellow, green)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3 id="线性渐变-nbsp-nbsp-从上到下">线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

登入後複製

css3背景顏色漸變效果如下：

css3顏色漸層：css3如何實現背景顏色漸層？

# #二、css3徑向漸層設定的背景色彩漸層

徑向漸層由它的中心定義。

為了創造一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸層的中心、形狀（圓形或橢圓形）、大小。預設情況下，漸層的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。

css3徑向漸層用到的屬性是radial-gradient。

語法：background: radial-gradient(shape size at position, start-color, ..., last-color);

實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(orange, yellow, pink); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(orange, yellow, pink); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(orange, yellow, pink); /* Firefox 3.6 - 15 */
    background: radial-gradient(orange, yellow, pink); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3 id="径向渐变">径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

登入後複製

css3背景色彩漸層效果如下：

#本文到這裡就結束了，關於css3漸層中css3線性漸層和css3徑向漸層的更多內容可以參考

css3手冊。

以上是css3顏色漸層：css3如何實現背景顏色漸層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1320

PHP教程

1269

C# 教程

1249

Related knowledge

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

OneNote如何設定圖片為背景 May 14, 2023 am 11:16 AM

Onenote是Microsoft提供的最好的筆記工具之一。結合Outlook和MSTeams，Onenote可以成為提高工作和個人創意工作效率的強大組合。我們必須以不同的格式做筆記，這可能不僅僅是把事情寫下來。有時我們需要從不同來源複製圖像並在日常工作中進行一些編輯。如果知道如何應用更改，則貼上在Onenote上的圖像可以發揮很大作用。您在使用Onenote時是否遇到過貼在Onenote上的圖像無法讓您輕鬆工作的問題？本文將著重於在Onenote上有效地使用圖像。我們可

Golang圖片處理：如何進行圖片的顏色漸層和灰階映射 Aug 19, 2023 am 08:53 AM

Golang圖片處理：如何進行圖片的顏色漸層和灰階映射導語：隨著數位媒體的發展，圖片處理已成為我們日常生活中不可或缺的一部分。在Go語言中，我們可以利用一些函式庫來進行圖片處理，如github.com/disintegration/imaging。本文將介紹如何利用這個函式庫進行圖片的顏色漸層和灰階映射。一、引入庫首先，我們需要在Go專案中引入github.com/

巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕，希望對大家有幫助！

Win11 新版畫圖：一鍵移除背景實現摳圖功能 Sep 15, 2023 pm 10:53 PM

微軟邀請Canary和Dev頻道的WindowsInsider專案成員，測試和體驗新版畫圖（Paint）應用，最新版本號為11.2306.30.0。這次版本更新最值得關注的新功能是一鍵摳圖功能，使用者只需要點擊一下，就能自動消除背景，凸顯畫面主體，方便使用者後續操作。整個步驟非常簡單，使用者在新版畫圖應用程式中匯入圖片，然後點擊工具列上「移除背景」（removebackground）按鈕，就可以刪除圖片中的背景，使用者也可以使用矩形來選擇要消除背景的區域。