CSS3 設定漸變效果

2021-10-03 12:31:09 字數 1840 閱讀 8472

說明to top

從下到上漸變

to bottom

從上到下漸變

to left

從右到左漸變

to right

從左到右漸變

to top left

從右下方到左上方漸變

to top right

從左下方到右上方漸變

to bottom left

從右上方到左下方漸變

to bottom right

從左上方到右下方漸變

語法順序 :

(漸變方向)(起始顏色)(結束顏色)

css code :

html code:

>

>

charset

="utf-8"

>

>

設定漸變效果title

>

type

="text/css"

>

divspan

.top

.bottom

.left

.right

.topleft

.topright

.bottomleft

.bottomright

style

>

head

>

>

class

="top"

>

>

微微一笑很傾城span

>

div>

class

="bottom"

>

>

微微一笑很傾城span

>

div>

class

="left"

>

>

微微一笑很傾城span

>

div>

class

="right"

>

>

微微一笑很傾城span

>

div>

class

="topleft"

>

>

微微一笑很傾城span

>

div>

class

="topright"

>

>

微微一笑很傾城span

>

div>

class

="bottomleft"

>

>

微微一笑很傾城span

>

div>

class

="bottomright"

>

>

微微一笑很傾城span

>

div>

body

>

html

>

result :

線性漸變是顏色沿著一條直線過渡,製作漸變效果,需要指定漸變方向起始顏色結束顏色三個屬性,屬性之間用逗號隔開。

徑向漸變是圓形或橢圓形漸變,顏色不再沿著一條直線變化,而是從乙個起點朝所有方向混合。在實際開發中,徑向漸變並沒有線性漸變廣泛,所以在此不進行詳解。

我尋見一片海 碧藍且耀著光

大片船隻航行其上 都向著遠方

shared by foriver_江河

CSS3漸變效果

css3提供了linear gradient屬性實現背景顏色的漸變功能。在以前,這種效果必須採用才能實現的。方位可選引數,漸變的方位。可以使用的值有 to top to top right to right to bottom to bottom left to left to top left。起...

CSS3漸變效果

一.線性漸變linear gradient 1.使用方法 background webkit linear gradient red,blue background moz linear gradient red,blue background linear gradient red,blue 2....

CSS3中漸變效果

1.線性漸變 a 從左到右漸變 div nth child 1 b 不指定方向預設是從上到下 div nth child 2 c 按照指定角度 div nth child 3 d 斑馬線漸變 2.頸項漸變 radial gradient 輻射半徑,中心的位置,起始顏色,終止顏色 中心點位置 at l...