web前端基礎知識

時間 2020-02-24

標籤 web 前端基礎知識欄目 HTML 简体版

原文原文鏈接

HTML

什麼是HTML,和他ML... php

網頁能夠比做一個裝修好了的,能夠娶媳婦的房子. css

房子分爲:毛坯房,精裝修 html

毛坯房的修建: 磚,瓦,水泥,石頭,石子.... 前端

精裝修的房子:在毛坯房的基礎上進行粉刷,覆蓋,雕琢,修飾等操做....
html5

HTML標籤至關於蓋毛坯房用的石子,磚瓦....:房子成功,可是不會很好看. web

CSS屬性至關於裝修時候使用的刷子,塗料,扣板...: 可讓毛坯房變得更加美觀 chrome

HTML canvas

超文本標記語言. HyperText Markup Language 瀏覽器

HTML標籤的格式: 安全

格式:

<標籤名屬性名="屬性值" 屬性名="屬性值"....>內容</標籤名>

注意: 標籤能夠嵌套使用.嵌套包含時必須被另一個標籤徹底包含.

HTML經常使用標籤:

全局架構標籤: 網頁中必不可少的部分.

       <!DOCTYPE html>
       <html>
           <head>
               書寫內容不可見的部分;
           </head>
           <body>
               書寫內容可見;
           </body>
       </html>

BODY體

body標籤

屬性:

bgcolor backgroundcolor 背景顏色

標題標籤

h1 表示當前頁面的最主要內容,一個h1標籤在一個頁面中軍容許使用一次.

h2 表示當前頁面的次要內容,容許使用多個.

h3 表示其餘信息內容標題,比次要內容等級還要低..

h4 .... 不推薦使用

h5 .... 不推薦使用

h6 .... 不推薦使用

       標題標籤的做用:

           用於書寫標題.

標題的標籤的特徵:

           全部標籤內容都是粗體,
           字體大小從h1-h6逐漸減少
           自帶回車換行效果

樣式標籤:

b 粗體標籤,僅用於表示樣式 bold

i 斜體標籤 italic

u 下劃線標籤 underline

strong 粗體標籤 ,還在頁面中起到一個強調的做用,對搜索引擎而言

em 斜體標籤,,還在頁面中起到一個強調的做用,對搜索引擎而言,更強烈一點

city 斜體標籤,還在頁面中起到一個強調的做用,對搜索引擎而言

font 字體樣式標籤

           屬性:

               color 顏色

size 大小 1-7

face 字體類型,都是在用戶的電腦中獲取字體類型

格式標籤:

p 段落標籤

hr 水平線標籤

br 強制換行標籤

注意:hr和br標籤比較特殊,這類標籤只有開始沒有結束,單標籤或者自封閉標籤

成對標籤: <body></body>

單標籤:

列表標籤:

       ul 無序列表 unorder list

           格式: 經常使用與製做導航

               <ul>
                   <li>鋤禾日當午</li>
                   <li>清明上河圖</li>
                   <li>造血幹細胞</li>
                   <li>班長兼學位</li>
               </ul>

ol 有序列表 order list

格式:

               <ol>
                   <li>英雄聯盟</li>
                   <li>地下城與勇士</li>
                   <li>穿越火線</li>
                   <li>御龍在天</li>
               </ol>

注意:有順序關係的並列內容使用ol,沒有順序關係的列表使用ul.

dl 定義列表 defined list

dt 定義列表的標題

dd 定義列表的屬性

定義列表僅用於定義一個事物.

格式:

表格標籤:

table 用於定義表格的範圍

屬性:

border: 設置邊框的粗細

width: 設置表格的表格的總寬度

height: 設置表格的總高度

align : 設置表格水平方向的對其方式

值: left 左對齊 center 居中對其 right 右對齊

bgcolor: 設置背景顏色

tr 定義表格的行

bgcolor 設置行的背景顏色

td 定義表格的單元格

bgcolor 設置單元格的背景顏色

rowspan 設置單元格的跨行數量

colspan 設置單元格的跨列數量

就近原則概念:

若是具備嵌套關係的標籤設置了同一種屬性,那麼離標籤越近的屬性優先級別越高.

表格的書寫格式:

th 單元格標籤的一種,用法和td是同樣的

           th標籤專門用於製做表格的表頭部分,字體默認粗體,水平居中對其

       caption 表格描述標籤,用於爲表格添加一個標題

超連接

在網頁中,經過點擊操做可以打開新的頁面的結構就是超級連接,簡稱超連接.

a 標籤

target屬性設置目標地址的打開方式

_self 在當前頁面打開默認值

_blank 在新頁面打開

href屬性設置鏈接的目標地址

           在web中的地址問題:

               絕對鏈接: 帶有協議的鏈接就是絕對鏈接

http://www.itxdl.cn 他的協議是http:// 超文本傳輸協議

https://www.taobao.com 他的協議是 https:// 帶有安全'套接字'的超文本傳輸協議

ftp:// ftp協議文件傳輸協議

ftps://....

file:// 本地文件協議

相對鏈接: 沒有協議的鏈接就是相對鏈接

./a/bcd/1.html

../a/bcd/2.html

a/bcd/1.html

. 表示在當前頁面所在的文件夾中查找

.. 表示在當前頁面所在文件夾的上層文件夾查找

圖片標籤

img標籤

src 設置圖片來源,圖片地址

width 設置圖片的寬度

height 設置圖片的高度

border 設置圖片邊框粗細

alt 設置圖片描述信息

title 設置圖片的描述信息

表單標籤:

在頁面中用於和用戶交互的空間都是表單標籤.主要做用是向服務器端發送數據.

form 定義表單的範圍及表單的提交方式標籤

       屬性:

       action 設置當前表單內容的提交地址

method 設置當前表單提交內容的方式,get 和post 方式

get方式: 信息明文傳送,能夠直接觀察到,get方式傳輸數據量有限.(明信片)

post方式:信息非明文傳輸,不能夠直接觀測到,post傳輸方式數據量很是大.(寫信)

enctype 設置傳輸信息的加密方式

multipart/form-data 上傳文件專用

input 輸入標籤

該標籤經過改變type屬性,能夠獲取9中不一樣風格的表單

type="text" 文本輸入框

type="password" 密碼輸入框

type="radio" 單選表單

type="checkbox" 複選表單

type="file" 文件選取表單

type="hidden" 隱藏表單

type="submit" 提交按鈕

type="reset" 重置按鈕

type="image" 圖片提交按鈕

input標籤經常使用屬性:

           type 設置表單類型

           name 設置表單名稱

value 設置表單值

select 下拉列表或者多選列表標籤

name 設置表單的名稱,value在option中設置

multiple 設置是否爲多選列表

下拉列表

多選列表

option 多選列表的列表標籤

textarea 文本域標籤/多行文本標籤

name 設置表單的名稱

cols 設置表單的列數(寬度)

rows 設置表單的行數(高度)

button 自定義按鈕標籤

type 設置按鈕的類型 submit提交按鈕 reset 重置按鈕 button 普通按鈕

頁面佈局標籤:

div 用於頁面佈局操做,沒有特殊意義

span 內容標籤

塊狀元素:div

塊狀元素獨佔一行

塊狀元素能夠設置寬度高度

內聯元素:span

內聯元素能夠在一行共存

內聯元素高度和寬度無效

head頭信息

title 設置網站的標題,顯示在標籤欄中

meta 設置瀏覽器信息或者設置搜索引擎相關信息

       爲瀏覽器設置信息

           字符集設置

爲搜索引擎設置信息

關鍵字

描述

base 基準鏈接標籤

href 爲頁面中全部相對鏈接設置一個基礎的絕對地址.對絕對鏈接無效

target 爲頁面中沒有設置target屬性的鏈接,強制設置爲當前設定值

表示顏色的方式

HTML中表示顏色的方式有三種:

英文單詞 : red,green,blue....

RGB格式 : R red G green B blue

僅IE支持,不推薦在HTML中使用RGB格式

           RGB(紅色值,綠色值,藍色值);

           每種顏色的取值 0-255

HEX模式 :

           #紅色值綠色值藍色值

           #FF9900 紅色 FF 綠色99 藍色00

SEO和SEM

SEO: 搜索引擎優化,長期的規程要有耐心,不花錢就能夠提高天然排名

SEM: 搜索引擎影響,投入金錢,短時間見效.

關於字符集

能夠認爲字符集就是語言種類

頁面字符集:文件自己的字符集類型就是頁面字符集.

聲明字符集:通知瀏覽器文件中字符的字符集類型.

保證頁面不亂碼: 保證頁面字符集和聲明字符集一致便可.

中文字符集:

utf-8 國際統一字符集,可以表示世界上絕大多數的語言.

gbK 國家標準的擴展版本,包含全部中文文字

gb2312 國家2312標準字符集,包含5000個經常使用漢字

big5 繁體中文字符集

HTML和XHTML

XHTML也是超文本標記語言的一種,是嚴格語法的HTML語種.

HTML規範比較鬆散:

單標籤能夠不封閉

屬性值可使用單雙引號也能夠不用....

XHTML 8大語法要求:

1.全部標籤名和屬性名必須小寫

2.全部標籤必須封閉,單標籤須要自封閉

3.全部標籤嵌套必須合法

4.全部屬性必須有值,multiple值爲自己 multiple ="multiple"

5.全部屬性必須使用雙引號

6.全部圖片標籤必須使用alt屬性

7.全部註釋內容中不能夠出現-,可使用=代替橫線

8.全部特殊字符必須使用實體字符表示

HTML中的註釋

做用:僅僅用於頁面中的內容描述不會影響顯示和效果

格式:

實體字符

用於在頁面中輸出特殊字符的字符格式就是實體字符;

經常使用實體字符

空格

< 小於號

> 大於號

關於HTML5

故事講完了!~

html5標準的改變

html5依舊是鬆散語法的HTML版本,繼承HTML4而來的.

Xhtml5也是被官方默認的一個版本.

1.DTD聲明的改變

<!DOCTYPE html>

2.標籤的改變

不能夠寫結束標籤的表

br ,hr ,img,....

能夠省略結束標籤的標籤

li,option,tr,td...

能夠徹底省略的標籤

html,head,body,....

針對搜索引擎的優化

爲了讓搜索引擎更好的識別和收錄頁面內容.HTML5爲搜索引擎新增了一系列的結構標籤

       header   用於表示網站結構頂部的標籤

       footer   用於表示網站底部結構都而標籤

       aside   用於表示網站側邊欄的標籤

       section 用於表示網站主體區域的標籤

       nav   用於表示網站導航區域的標籤

       article 用於表示頁面文章的標籤

       figure 用於信息描述的標籤

       figcaption 用於信息描述的配合標籤

       hgroup 網站標題組標籤

       details 信息詳解標籤

       time 時間標籤

       address 地址標籤

       mark 標註標籤

總結:不要懼怕,以上標籤都是div標籤

多媒體標籤

audio 音頻標籤

屬性:

src 引入音樂文件地址

controls 設置是否具備控制面板屬性

loop 設置是否循環播放屬性

autoplay 設置是否自動播放屬性

<audio src="./_WStyle.mp3" controls></audio>

<audio controls loop>
           您的破瀏覽器不支持該標籤
           <source src="_WStyle.mp3" type="audio/mp3">
           <source src="_WStyle.ogg" type="audio/ogg">
       </audio>

video 視頻標籤

src 引入視頻地址

controls 設置是否具備控制面板

poster 設置視頻的預覽圖

width 設置視頻的寬度

height 設置視頻的高度

autoplay 自動播放視頻

<video src="movie.webm" controls></video>
       
       <video controls poster="2.jpg" width="1000" height="500">
           您的破瀏覽器不支持視頻標籤.
           <source src="./movie.webm" type="video/webm" />
           <source src="./movie.webm" type="video/webm" />
           <source src="./movie.webm" type="video/webm" />
       </video>

canvas 畫布標籤

能夠用於繪畫操做,製做畫圖板,
能夠用於遊戲製做....

embed 媒體標籤

用於在在頁面中引入flash文件

智能表單

對HTML4中的表單用法和標籤類型進行了擴展.

       URL表單   type="url"

       郵箱表單 type="email"

       電話表單 type="tel"

       顏色表單 type="color"

       滑塊表單 type="range"

       搜索表單 type="search"

       數字表單 type ="number"

       日期表單 type="date"

       時間表單 type="time"

       周選取表單 type="week"

       月選取表單 type="month"

       日期時間表單 type="datetime" 僅Opera瀏覽器識別

       日期時間表單 type="datetime-local"

注意:以上全部新增表單都是HTML5爲input 標籤新增的表單類型

新增的智能表單用法:

在HTML4中表單標籤必須放在Form標籤之中才能夠被提交到服務器,

若是頁面中存在多個form表單而且在頁面佈局時比較分散,不適合排版很難處理

HTML5中容許將表單標籤和form標籤進行分離操做:

1.爲form標籤添加一個id屬性

2.爲制定的須要提交的屬性當前form的表單標籤添加form屬性,值爲form的id值

#CSS

css是什麼?

CSS的做用用於修飾頁面中的HTML標籤.

層疊樣式表!

瀏覽器

瀏覽器一共有五大廠商:

       IE瀏覽器         微軟公司

       chrome瀏覽器     谷歌

firefox瀏覽器 MOZ組織

Opera瀏覽器歐朋/360

safari瀏覽器 apple公司

瀏覽器前綴:

若是CSS屬性沒有最終實現而是出於實驗階段,使用屬性的時候須要對當前CSS進行私有屬性標註才能夠生效. 標註的部分稱之爲瀏覽器私有屬性前綴:

       IE瀏覽器         -ms-

       chrome瀏覽器     -webkit-

firefox瀏覽器 -moz-

Opera瀏覽器 -o-/-webkit- 早期/後期

safari瀏覽器 -webkit-

取值和單位

顏色:

英文單詞模式

RGB模式

HEX模式

新增顏色模式

RGBA模式

在RGB模式基礎上增長了透明度設置的顏色方式

RGBA(紅色值,綠色值,藍色值,透明度)

透明度的取值 0-1之間的小數 0 徹底透明 1 徹底不透明

HSL模式

H 色相(顏色的類型) S 飽和度 L 亮度

格式:

HSL(色相,飽和度,亮度);

色相: 0-360的正數

飽和度: 0% -100%

亮度: 0% -100%

HSLA模式

格式:

HSLA(色相,飽和度,亮度,透明度);

透明度的取值 0-1之間的小數 0 徹底透明 1 徹底不透明

長度單位:

px 像素用於表示一個顏色的點就是像素

像素是一個相對單位,能夠有系統進行調整.相對單位

mm 毫米不容許使用,絕對單位

cm 釐米不容許使用,絕對單位

em 一個漢字的大小

ex 一個小寫x的大小

CSS的使用方式

分爲四種使用方式:

外鏈式CSS

導入式CSS

嵌入式CSS

內聯式CSS

CSS的格式

CSS的具體格式:

CSS選擇器{

CSS屬性名:屬性值;
CSS屬性名:屬性值;

...
}

CSS的選擇器:

用於選中頁面中制定的標籤添加樣式,這種選擇的語法就是選擇器.

HTML選擇器

直接使用HTML標籤的名稱進行選擇,選中全部的同名的HTML標籤

標籤名{css樣式}

CLASS選擇器

爲須要選取的標籤添加class屬性,而且定義值,
在CSS中使用.class屬性值就能夠選取具備class值的標籤,能夠添加多個元素

.class名{css樣式}

   ID選擇器

爲須要選擇的頁面添加id屬性,而且自定義一個值

在CSS中使用#id值就能夠選中這個標籤,一個頁面中禁止出現兩個以上的同名ID

#id名{CSS樣式}

關係選擇器

選中制定標籤內部的全部指定標籤.

選擇器1 選擇器2{css樣式}

組合選擇器

同時使用多個選擇器,中間使用逗號分隔,能夠選中全部的符合選擇器的元素添加樣式

選擇器1,選擇器2{css樣式}

通用選擇器

* 用於選中頁面中的全部標籤.使用時須要慎重,而且通常配合組合選擇器使用

   屬性選擇器

       選擇器[屬性]

選中具備執行屬性名稱的標籤

選擇器[屬性="值"]

選中具備執行屬性且名稱和指定名稱相同的標籤

選擇器[屬性^="字符"]

選中具備執行屬性,且屬性以制定字符開頭的標籤

選擇器[屬性$="字符"]

選中具備執行屬性,且屬性以制定字符結尾的標籤

選擇器[屬性*="字符"]

選中具備執行屬性,且屬性包含制定字符的標籤

結構選擇器

child系列

first-child

格式: 選擇器:first-child{CSS樣式}

last-child

格式: 選擇器:last-child{CSS樣式}

nth-child

格式: 選擇器:nth-child(位置){CSS樣式}

位置可使用數字,奇偶單詞或者帶有n的表達式

nth-last-child

格式: 選擇器:nth-last-child(位置){CSS樣式}

位置可使用數字,奇偶單詞或者帶有n的表達式

注意:child系列的選取方式規則:

1.選擇符合選擇器(:前面的部分)的元素

2.選擇全部選中元素的全部父元素

3.找到全部父元素中制定位置的子元素

4.驗證第三步中找到的子元素是否符合第一步中用於選中元素的選擇器(:前面的部分),若是符合則選中,若是不符合則拋棄

of-type系列

first-of-type

格式: 選擇器:first-of-type{CSS樣式}

last-of-type

格式: 選擇器:last-of-type{CSS樣式}

nth-of-type

格式: 選擇器:nth-of-type(位置){CSS樣式}

位置可使用數字,奇偶單詞或者帶有n的表達式

nth-last-child

格式: 選擇器:nth-last-of-type(位置){CSS樣式}

位置可使用數字,奇偶單詞或者帶有n的表達式

注意:of-type系列的選取方式規則:

1.選中頁面中全部符合選擇器(:前面的部分)的元素

2.選中全部符合選擇器元素(:前面的部分)的全部父元素.

3.將全部父元素中全部有符合選擇器(:前面的部分)的元素組成一個新的集合

4.在新的集合中選擇指定位置的元素

   僞類選擇器

       選擇器:link

           選中符合選擇器的元素的正常鏈接狀態,僅適合於A標籤

選擇器:hover

選中符合選擇器的元素的鼠標通過狀態,適用於全部元素

選擇器:active

選中符合選擇器的元素的點擊狀態,僅適合於A標籤

       選擇器:visited

           選中符合選擇器的元素的訪問事後的鏈接狀態,僅適合於A標籤

僞對象選擇器

選擇器::first-letter

選中符合選擇器的內容中第一個字符,添加樣式

選擇器::first-line

選中符合選擇器的內容中的第一行文字,添加樣式

選擇器::before

選中符合選擇器的內容中的前半部分

選擇器::after

選中符合選擇器的內容的後半部分

字體屬性

font-size :

設置字體的大小

font-weight:

設置字體的粗細

color :

設置字體的顏色

font-style :

設置是否爲斜體

font-family:

設置字體的累心,須要注意依然須要使用本地系統的字體庫

背景屬性

background

background-color 設置元素的背景顏色

background-image 設置元素的背景圖片

       格式:

       background-image:url(圖片地址);

background-repeat: 設置背景圖片的重複方式

重複方式:

           repeat 橫向和縱向重複

           no-repeat 不重複

repeat-x 橫向重複

repeat-y 縱向重複

background-position-x: 設置背景圖片的橫向位置

background-position-y: 設置背景圖片的縱向位置

全部位置均可以使用長度單位或者百分比

除此以外,橫向位置可使用left center right 縱向位置 top center bottom

background-size: 設置背景圖片的大小

透明度設置

opacity 設置整個元素的透明度

取值範圍 0 -1 0 透明 1不透明

盒子模型

任何元素在瀏覽器中都會被以盒子模型的方式進行解析,解析只有具備盒子模型的屬性.

margin 外間距

margin: 設置四個方向的外間距

margin-left: 設置元素左側的外間距

margin-right 設置元素右側的外間距

margin-bottom 設置元素底部的外間距

margin-top 設置元素頂部的外間距

border 邊框

border: 設置邊框的綜合屬性

按照方向劃分四個屬性

border-top: 設置頂部邊框的顏色風格和寬度

border-bottom 設置底部邊框的顏色風格和寬度

border-left 設置左側邊框的顏色風格和寬度

border-right 設置右側邊框的顏色風格和寬度

按照值劃分三個屬性

border-width 設置四個邊的寬度

border-style 設置四個邊的樣式

       border-color 設置四個邊的顏色

       按照值和方向劃分12個屬性

border-top-width: 設置頂部邊框的寬度

border-top-style 設置頂部邊框的風格

border-top-color 設置頂部邊框的顏色

border-bottom-width: 設置底部邊框的寬度

border-bottom-style 設置底部邊框的風格

border-bottom-color 設置底部邊框的顏色

border-left-width: 設置左側邊框的寬度

border-left-style 設置左側邊框的風格

border-left-color 設置左側邊框的顏色

border-right-width: 設置右側邊框的寬度

border-right-style 設置右側邊框的風格

border-right-color 設置右側邊框的顏色

邊框圓角屬性

border-radius:邊框圓角綜合屬性,設置四個角

           水平和垂直半徑相同:

           border-radius: 半徑;

           水平和垂直半徑不一樣:

           border-radius: 水平半徑/垂直半徑;

border-top-left-radius: 設置左上角的圓角

           水平和垂直半徑相同:

           border-top-left-radius: 半徑;

           水平和垂直半徑不一樣:

           border-top-left-radius: 水平半徑垂直半徑;

border-top-right-radius: 設置右上角圓角

           水平和垂直半徑相同:

           border-top-right-radius: 半徑;

           水平和垂直半徑不一樣:

           border-top-right-radius: 水平半徑垂直半徑;

border-bottom-left-radius: 設置左下角圓角

           水平和垂直半徑相同:

           border-bottom-left-radius: 半徑;

           水平和垂直半徑不一樣:

           border-bottom-left-radius: 水平半徑垂直半徑;

border-bottom-right-radius : 設置右下角圓角

           水平和垂直半徑相同:

           border-bottom-right-radius: 半徑;

           水平和垂直半徑不一樣:

           border-bottom-right-radius: 水平半徑垂直半徑;

   padding 內補白

       padding 同時設置四個方向的內間距

padding-left 設置元素左側的內間距

padding-right 設置元素右側的內間距

padding-top 設置元素頂部的內間距

padding-bottom 設置元素底部的內間距

注意: border和padding會增長元素的總體大小,margin不會

佈局屬性

佈局屬性的做用就是爲了設計頁面而存在的CSS屬性.

display : 設置元素的顯示方式

none 不顯示元素

block 顯示爲塊狀元素

       inline 顯示爲內聯元素

       inline-block 顯示爲行內塊狀元素

...

float: 設置元素的浮動屬性

方式:

left: 左浮動

right: 右浮動

none:不浮動

注意:浮動元素和正常的非浮動元素不在同一個層面,所元素浮動以後,當前元素下面的區域能夠存放其餘元素,爲了防止其餘元素在浮動元素之下襬放須要使用clear屬性進行設置

clear : 清除浮動元素對當前元素的影響

       值:

           left 清除左浮動

right 清除右浮動

both 清除左右浮動

visibility: 設置元素是否可見

hidden 設置元素不可見

visible 設置元素可見

注意: visibility設置爲hidden時元素不可見可是依舊佔用物理空間,而display設置爲none時元素不可見,而且不佔用物理空間.

overflow: 設置元素中內容溢出的處理方案

值:

visible 超出元素依舊顯示內容

hidden 超出元素部分隱藏

scroll 超出元素時添加滾動條

#漸變效果

漸變效果分爲兩大類:

線型漸變: 單線型漸變和重複的線型漸變

徑向漸變: 單徑向漸變和重複的徑向漸變

單線型漸變

簡單漸變:

linear-gradient(顏色,顏色,顏色....)

帶有方向的漸變

linear-gradient(方向,顏色,顏色,顏色....)

方向取值:

to top 自下而上進行漸變

to bottom 自上而下進行漸變

to left 從右向左漸變

to right 從左到右漸變

角度取值

帶有顏色起始位置的漸變

linear-gradient(方向,顏色位置,顏色位置,顏色位置...);

注意: 在顏色後面進行設置的不是顏色佔有的比例而是當前顏色純色出現的位置,純色以外採起漸變或者徹底純色填充的原則.

單徑向漸變

簡單的徑向漸變

radial-gradient(顏色,顏色....)

設定形狀的徑向漸變

radial-gradient(形狀,顏色,顏色...);

形狀取值: circle 圓形 ellipse橢圓形

設定圓心的徑向漸變

radial-gradient(at 圓心座標 ,顏色,顏色....);

圓心座標可使用長度單位,也可使用位置單詞

水平 left center right

垂直 top center bottom

設置漸變終點的徑向漸變

radial-gradient(漸變終點,顏色,顏色...);

漸變終點:

closest-side 從圓心漸變到最近的邊

closest-corner 叢圓心漸變到最近的角

farthest-side 從圓心漸變到最遠的邊

farthest-corner 叢圓心漸變到最遠的角

長度值

設置顏色位置的徑向漸變

radial-gradient(顏色位置,顏色位置....);

最完整的徑向漸變設置

radial-gradient(形狀漸變終點 at 圓心位置,顏色位置,顏色位置...);

重複的線型漸變

repeating-linear-gradient(方向,顏色位置,顏色位置...)

通常狀況下重複線型漸變僅最後一個顏色設置位置,並且最後一個顏色位置點決定重複的次數

重複次數計算方式 = 100% / 最後一個顏色點的位置百分比

重複的徑向漸變

repeating-radial-gradient(形狀漸變終止點 at 圓心座標 , 顏色位置,顏色位置....)

通常狀況下重複線型漸變僅最後一個顏色設置位置,並且最後一個顏色位置點決定重複的次數

重複次數計算方式 = 100% / 最後一個顏色點的位置百分比

注意:通常狀況下咱們設置最開始的顏色和結束顏色一致,保證重複漸變式顏色不會太突兀.

角度單位

度 deg 一個圓劃分爲360度

周 turn 一個圓就是一個turn

弧度 rad 一個圓就是2π弧度

梯度 grad 一個圓劃分爲400梯度

轉載於猿2048:➻《web前端基礎知識》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。