linear gradient的用法詳解

2021-10-07 21:05:37 字數 1195 閱讀 6242

linear-gradient是css3的乙個屬性,功能強大,但是因為使用的靈活性,讓沒接觸過的人感覺不好下手,下面來一起學習一下:

一、介紹

mdn介紹文件

linear-gradient 是一種實現線性漸變的屬性,顧名思義,它的特點的是控制漸變,特點是線性的進行控制。

屬性介紹:

linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);

可以簡化為:

即linear-gradient(角度或者(to + 方向), 顏色單元);

二、使用技巧

2.1 方格背景

線性漸變配合著backage-size有著意想不到的效果:

實現:

background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%),

linear-gradient(rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%);

background-size: 30px 30px;

background-color: white;

height: 200px;

2.2 棋盤效果
background-image: linear-gradient(45deg,#ccc 25%,transparent 0),

linear-gradient(45deg,transparent 75%,#ccc 0),

linear-gradient(45deg,#ccc 25%,transparent 0),

linear-gradient(45deg,transparent 75%,#ccc 0);

background-position: 0 0,-15px 15px,15px -15px,30px 30px;

background-size: 30px 30px;

background-color: white;

LinearGradient線性渲染

學習自 package com.example.demo import android.content.context import android.graphics.canvas import android.graphics.color import android.graphics.linea...

linear gradient 實現漸變

linear gradient to left right top bottom 下述值用來表示漸變的方向,可以使用角度或者關鍵字來設定 用角度值指定漸變的方向 或角度 toleft 設定漸變為從右到左。相當於 270deg toright 設定漸變從左到右。相當於 90deg to top 設定漸...

LinearGradient線性渲染

import android.content.context import android.graphics.canvas import android.graphics.color import android.graphics.lineargradient import android.grap...