CSS linear-gradient屬性案例詳解
linear-gradient是css3的一個屬性,功能強大,但是因為使用的靈活性,讓沒接觸過的人感覺不好下手,下面來一起學(xué)習(xí)一下:
一、介紹
linear-gradient 是一種實現(xiàn)線性漸變的屬性,顧名思義,它的特點的是控制漸變,特點是線性的進(jìn)行控制。
屬性介紹:
linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+);
可以簡化為:
1.關(guān)于控制線性變化的參數(shù)可以是多個,以逗號分隔
2.每一個控制線性變化的單元有兩部分組成
3.第一部分是線性變化的方向,有兩種形式:第一種形式是是角度,順時針增加,比較靈活;第二種形式是包含to和兩個關(guān)鍵詞:第一個指出水平位置left or right,第二個指出垂直位置top or bottom。關(guān)鍵詞的先后順序無影響,且都是可選的。to top, to bottom, to left 和 to right這些值會被轉(zhuǎn)換成角度0度、180度、270度和90度。其余值會被轉(zhuǎn)換為一個以向頂部中央方向為起點順時針旋轉(zhuǎn)的角度。這種相對于角度的設(shè)置,比較單一,只能設(shè)置8個方向(兩個是夾角方向)
4.第二部分是變化的顏色,默認(rèn)是漸變過程平分整個區(qū)域,可以以顏色 + 停止點的形式來設(shè)置某一個顏色變化的位置區(qū)間,這個也是支持多個,理論上沒有限制。
即linear-gradient(角度或者(to + 方向), 顏色單元);
二、使用技巧
2.1 方格背景
線性漸變配合著backage-size有著意想不到的效果:
實現(xiàn):
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 棋盤效果
實現(xiàn):
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;
到此這篇關(guān)于CSS linear-gradient屬性案例詳解的文章就介紹到這了,更多相關(guān)CSS linear-gradient屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
CSS3+Js實現(xiàn)響應(yīng)式導(dǎo)航條
今天制作了一個響應(yīng)式導(dǎo)航條,能夠自動隨著不同的屏幕分辨率或瀏覽器窗口大小的不同而改變導(dǎo)航條的樣式,這里主要用到的就是CSS3的Media Query。2014-05-05DIV+CSS網(wǎng)頁制作布局技巧學(xué)習(xí)
DIV+CSS網(wǎng)頁制作布局技巧學(xué)習(xí)...2006-09-09從豆瓣網(wǎng)站設(shè)計談網(wǎng)站重構(gòu)
這篇文章主要介紹了從豆瓣網(wǎng)站設(shè)計談網(wǎng)站重構(gòu)2006-09-09關(guān)于HTML的語義化標(biāo)簽和無語義化標(biāo)簽
這篇文章主要介紹了關(guān)于HTML的語義化標(biāo)簽和無語義化標(biāo)簽,語義化的標(biāo)簽,旨在讓標(biāo)簽有自己的含義,讓瀏覽器認(rèn)識這個標(biāo)簽所傳達(dá)的信息,是干什么的有什么作用,需要的朋友可以參考下2023-04-04