css3如何實現顏色漸層效果-css教學-PHP中文網

首頁

web前端

css教學

css3如何實現顏色漸層效果

王林

Nov 16, 2020 pm 02:36 PM

css3 顏色漸層

css3實作色彩漸層效果的方法：可以利用linear-gradient函數和radial-gradient函數分別實現線性漸變效果和徑向漸層效果，如【linear-gradient(yellow, green)】。

css3如何實現顏色漸層效果

css3漸層有兩種：css3線性漸層和css3徑向漸層。

（學習影片分享：css影片教學）

一、線性漸層色彩漸層

函數：

linear-gradient () 函數用於建立一個表示兩種或多種顏色線性漸變的圖片。

語法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

登入後複製

值：

direction 以角度值指定漸層的方向（或角度）。
color-stop1, color-stop2,... 用來指定漸層的起止色。

範例：

<!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>线性渐变 - 从上到下</h3>
<div id="grad1"></div>
</body>
</html>

登入後複製

二、徑向漸層

函數；

radial-gradient() 函數用徑向漸層創建"圖像"。

徑向漸層由中心點定義。

為了創造徑向漸層你必須設定兩個終止色。

語法：

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

登入後複製

值：

#1、shape 決定圓的型別

ellipse (預設): 指定橢圓形的徑向漸層。
circle ：指定圓形的徑向漸層

2、size 定義漸層的大小，可能值：

#farthest-corner (預設) : 指定徑向漸層的半徑長度為從圓心到離圓心最遠的角
closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角
#farthest-side ：指定徑向漸層的半徑長度為從圓心到離圓心最遠的邊

3、position 定義漸層的位置。可能值：

center（預設）：設定中間為徑向漸層圓心的縱座標值。
top：設定頂部為徑向漸層圓心的縱座標值。
bottom：設定底部為徑向漸層圓心的縱座標值。

4、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>径向渐变</h3>
<div id="grad1"></div>
</body>
</html>

登入後複製

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1269

C# 教程

1248

Related knowledge

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

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

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

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