亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css漸變色背景|＜gradient示例詳解

  發(fā)布時(shí)間：2025-02-11 16:12:29   作者：在星空下   我要評(píng)論
CSS漸變是一種從一種顏色平滑過(guò)渡到另一種顏色的效果,可以作為元素的背景,它包括線性漸變、徑向漸變和錐形漸變，本文介紹css漸變色背景|＜gradient示例，感興趣的朋友一起看看吧

使用漸變色作為背景

可以直接將漸變色用作元素的背景，可以看做是一種特殊的背景圖片。（是作為背景background一個(gè)屬性值不是背景顏色background-color的屬性值 ）
CSS 漸變是一種從一種顏色平滑過(guò)渡到另一種顏色的效果，由 <gradient> 數(shù)據(jù)類型表示，它是 <image> 的一種特殊類型，由兩種或多種顏色之間的漸變過(guò)渡構(gòu)成。

  • linear-gradient() 創(chuàng)建線性漸變
  • radial-gradient() 創(chuàng)建徑向漸變
  • conic-gradient() 創(chuàng)建錐形漸變
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Gradients</title>
    <style>
      /*  線性漸變 */
        .linear-gradient {
            width: 200px;
            height: 200px;
            background: linear-gradient(to right, red, blue);
        }
      /* 徑向漸變 */
        .radial-gradient {
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, red, blue);
        }
    </style>
</head>
<body>
    <div class="linear-gradient"></div>
    <div class="radial-gradient"></div>
</body>
</html>

顯示效果：

image.png

線性漸變（Linear Gradient）

線性漸變是沿著一條直線的顏色過(guò)渡。你可以指定多個(gè)顏色點(diǎn)來(lái)創(chuàng)建復(fù)雜的漸變效果。

/* 從左到右的線性漸變，從紅色到藍(lán)色 */
background: linear-gradient(to right, red, blue);
/* 從上到下的線性漸變，從紅色到藍(lán)色 */
background: linear-gradient(to bottom, red, blue);
/* 45度角的線性漸變，從紅色到藍(lán)色 */
background: linear-gradient(45deg, red, blue);
/* 多個(gè)顏色點(diǎn)的線性漸變 */
background: linear-gradient(to right, red, yellow, green, blue);

顯示效果：

image.png

image.png

image.png

image.png

徑向漸變（Radial Gradient）

徑向漸變是從中心向外擴(kuò)展的顏色過(guò)渡。

/* 從中心向外的徑向漸變，從紅色到藍(lán)色 */
background: radial-gradient(circle, red, blue);
/* 橢圓形徑向漸變，從紅色到藍(lán)色 */
background: radial-gradient(ellipse, red, blue);
/* 多個(gè)顏色點(diǎn)的徑向漸變 */
background: radial-gradient(circle, red, yellow, green, blue);

顯示效果：

image.png

錐形漸變

錐形漸變是一種圍繞中心點(diǎn)旋轉(zhuǎn)的顏色漸變，類似于餅圖的效果。

/* 基本用法  */
background: conic-gradient([起始角度,] 色值1 位置1, 色值2 位置2, ...);
/* 簡(jiǎn)單錐形漸變 */
background: conic-gradient(red, yellow, green, blue);

顯示效果：

image.png

更多漸變控制

你可以通過(guò)指定顏色點(diǎn)的位置來(lái)獲得更多的控制。

/* 線性漸變，指定顏色點(diǎn)的位置 */
background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
/* 徑向漸變，指定顏色點(diǎn)的位置 */
background: radial-gradient(circle, red 0%, yellow 50%, green 100%);
/* 錐形漸變，指定起始角度和顏色點(diǎn)的位置 */
background: conic-gradient(from 45deg, red 0%, yellow 25%, green 50%, blue 75%);

顯示效果：

image.png

重復(fù)漸變（Repeating Gradients）

CSS 還支持重復(fù)漸變，可以創(chuàng)建條紋或其他重復(fù)圖案。

/* 重復(fù)線性漸變 */
background: repeating-linear-gradient(to right, red, yellow 10%, green 20%);
/* 重復(fù)徑向漸變 */
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);

顯示效果：

image.png

通過(guò)這些示例，你可以創(chuàng)建各種各樣的漸變效果來(lái)美化你的網(wǎng)頁(yè)。

更多

gradients.app 是一個(gè)在線工具，用于生成和定制各種漸變效果。這個(gè)網(wǎng)站提供了一個(gè)直觀的用戶界面，允許用戶創(chuàng)建線性漸變、徑向漸變和錐形漸變，并可以實(shí)時(shí)預(yù)覽和調(diào)整這些漸變的顏色、角度和其他參數(shù)。
漂亮的CSS和PNG漸變色，適用于網(wǎng)站 / Instagram / Photoshop — Gradients.app

參考資料：

使用 CSS 漸變 - CSS：層疊樣式表 | MDN

到此這篇關(guān)于css漸變色背景|＜gradient的文章就介紹到這了,更多相關(guān)css漸變背景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS 輻射漸變背景 radial-gradient的實(shí)現(xiàn)

    這篇文章主要介紹了CSS 輻射漸變背景 radial-gradient的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)
    2019-07-24

  • CSS實(shí)現(xiàn)兼容性的漸變背景(gradient)效果兼容眾多瀏覽器

    本文就將展示如何實(shí)現(xiàn)兼容性的漸變背景效果。在眾多的瀏覽器中，目前不支持Opera瀏覽器。垂直漸變，起始顏色紅色，結(jié)束顏色藍(lán)色，結(jié)束的藍(lán)色的透明度是0.5，感興趣的朋友可
    2013-08-08

  • CSS巧用漸變實(shí)現(xiàn)高級(jí)感背景光動(dòng)畫

    本文主要介紹了利用CSS中的conic-gradient()以及box-shadow模擬出光源陰影效果，從而實(shí)現(xiàn)一個(gè)充滿高級(jí)感的背景光動(dòng)畫，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2021-11-30

  • 使用css寫帶紋理漸變背景圖的示例代碼

    這篇文章主要介紹了使用css寫帶紋理漸變背景圖，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-07-20

最新評(píng)論