html中滾動字體的設置

頁中添加滾動字幕效果

<!DOCTYPE html>

<html>

<head>

<title>滾動字體的設置</title>

</head>

<body>

var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象

var ctx = canvas1.getContext("2d") // 2.上下文對象（畫筆）

ctx.shadowBlur = 10; // 陰影距離

ctx.shadowColor = "red" // 陰影顏色

ctx.shadowOffsetX = 30 // 陰影偏移

ctx.shadowOffsetY = 30 // 陰影偏移

ctx.font = "150px 楷體"

ctx.fillText("你好！", 20,150)

ctx.fillText("你好！", 20,350)

ctx.strokeText('你好！',23, 153)

ctx.strokeText('你好',23, 553)

canvas繪制文字

var x = 600

setInterval(function(){

if(x > -350){

//清空畫布

ctx.clearRect(0,0,600,600)

ctx.strokeText('你好！',x, 153)

ctx.fillText("你好！", x,350)

ctx.font = "50px 宋體"

ctx.strokeText('每天學習一點點',x, 553)

x -= 3

}else{x=590}

}, 16)

</script>

</body>

</html>

言

馬上我們就要進入下一個階段，也就是HTML和CSS實現前端界面的階段了，想必很多小伙伴都想給自己的頁面加點酷炫的特效，今天，我就給大家整理了一些非常酷炫的文字特效來裝點你的頁面！有些是從網絡上找的，有些是自己寫出來的

字體實例

下面就是一些字體實例了

鏤空字體

.loukong{ 
    /* 設置文字為透明，設置文本描邊*/ 
    background-color: #00c4ff;
    -webkit-text-fill-color: transparent; 
    -webkit-text-stroke:1px #000; 
}

立體字體

.liti{
    /* 文字左上設置多層淺色陰影，右下設置多層暗色陰影，文字色同背景色 */
    background-color: #d2d500;
    color: #d2d500;
    text-shadow: -1px -1px 0px #e6e600,-2px -2px 0px #e6e600,
    -3px -3px 0px #e6e600,1px 1px 0px #bfbf00,2px 2px 0px #bfbf00,3px 3px 0px #bfbf00;
 }

霓虹字體

.nihong{
    /* 深色底色，淺色文字，多層淺色文字陰影，彌散大 */
    background-color: darkgray;
    color: white;
    text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
 }

背景重疊

英文或者筆畫稀疏的文本比較適合，筆畫多看起來會不太好

.chongdie{
    /* 兩層背景，一層與被背景色相同，一層與文字色相同 */
    background-color: gray;
    color: #eee;
    text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
 }

幻色字體

.huanse{
    /* 兩層背景，沒啥技巧 */
    background-color: darkgray;
    color: white;
    text-shadow: 1px 1px 0px #0000FF,2px 2px 0px #0000FF,-1px -1px 0px #E31B4E,-2px -2px 0px #E31B4E;
 }

仿生字體

.fangsheng{
    /* 要把陰影與大小配合好，一般來說大小都是偏大時采用 */
    font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    text-transform: uppercase;/* 全開大寫 */
    font-size: 92px;
    color: #f1ebe5;
    text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
    font-weight: bold;
    letter-spacing: -4px;
    background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
 }

漸變文字

因為需要用到背景裁切（-webkit-background-clip），所以需要再嵌套一個背景div

.jianbian{
    background-color: #009195;
  }
.jianbian-inner{
    background: linear-gradient(90deg,#f88,#88f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* -webkit-text-stroke: 1px #000000; */
 }

后記

以上就是全部內容了，靈活運用css的屬性，就能創造出很多你想得到的和想都想不到的特效，甚至一些連寫腳本都很難實現的特效，所以，努力探索css吧，沖沖沖！

轉自簡書：喬一丁_2020強化班
原文鏈接：https://www.jianshu.com/p/b7fd3cf53924

tml入門基礎筆記(簡單實用)

一、初識html

1.HTML：Hyper Text Markup Language（超文本標記語言）

java是一門編譯性語言

html是一門解釋性的標記語言

超文本：文字、圖片、音頻、視頻、動畫、超鏈接

標記：就是指組成HTML的各種標簽

2.HTML5的優勢：

1、各大瀏覽器廠商對它的支持

2、市場的需求

3、跨平臺

3.W3C標準：

1、結構化標準：指用什么語言去搭建整個網站（html 5）

2、表現化標準：指用什么去裝飾整個網站（css3）

3、行為標準：指用什么去實現網站的功能（JavaScript，jQuery）

4.html的基本結構：

<html>

<head>

<title>天貓精選-理想生活上天貓</title>

</head>

大家好?。。。?！

</body>

</html>

雙標簽：有個兩個標簽成對出現的叫做雙標簽

表示HTML網頁的開始，表示網頁的結束

表示網頁頭部的開始，表示網頁頭部的結束

表示網頁身體的開始，表示網頁身體的結束

表示網頁標題的結束

標題標簽

<h1></h1>....<h6></h6>:會對文字進行加粗，并且改變字體的大小，還會進行換行

段落標簽

<p></p>:表示它獨占一行，會保留段落之間的間距

加粗

<strong></strong>:表示加粗

斜體

<em></em>:表示斜體

字體設置

<font></font>:表示字體

屬性：color顏色

face字體的樣式

size字體的大小

單標簽：只有一個，開始就結束的叫做單標簽

屬性：charset = “utf-8”;utf-8表示國際編碼格式，所有的字符都能識別

換行標簽

<br/>：表示換到下一行

水平線標簽

<hr/>:表示水平線

屬性：width表示水平線的寬度

size表示水平線的厚度

color表示水平線的顏色

align表示水平線的水平位置，left左邊，center中間，right右邊

圖像標簽

src表示的是圖片地址

絕對路徑：直接寫完整圖片所在的位置

相對路徑：先找到和你的網頁所在同一級的圖片所在位置，然后再去在這個基礎

去找圖片的位置，如果圖片在下一級那么使用“/”來找到它，如果

上一級使用“..”來找到它

alt表示的是圖片加載失敗的替代文字

title表示的是鼠標懸浮時圖片的提示文字

width表示圖片的寬度

height表示圖片的高度

特殊標簽：

大于符號：>（great than）

小于符號：<（less than）

空格符號：

版權符號：?

注釋：

5.超鏈接標簽

href表示鏈接的地址，使用相對路徑的方式去使用

target表示連接的方式

_blank表示在新窗口打開

_self表示在本窗口打開

_parent表示在父窗口打開

1、頁面間的鏈接，用于兩個頁面之間相互的跳轉

2、錨鏈接，用于頁面之間定位

①要設置一個錨點，語法錨點

②將點擊之后要跳轉的超鏈接設置跳轉的錨點位置，語法：

如果不在同一個頁面中，先寫好要跳轉頁面所在的位置，然后再寫錨點的名字

3、功能性鏈接 (發郵件、msn、可以打開本地的相應的客戶端)

語法：

二、網頁媒體元素

1.視頻元素<video></video>

屬性：src表示添加視頻的路徑(位置)

controls表示在添加的視頻元素上添加播放控件，只有一個屬性值

/autoplay表示自動播放（慎用），只有一個屬性值

如果屬性只有一個值，屬性值可以省略不寫

source表示引用的視頻源路徑，一般會引用多個源路徑，以避免瀏覽器不兼容的問題

2.音頻元素<audio></audio>

屬性：src表示添加視頻的路徑（位置）

controls表示在添加的音頻元素上添加播放控件，只有一個屬性值

/autoplay表示自動播放（慎用），只有一個屬性值

source表示引用的音頻源路徑，一般會引用多個源路徑，以避免瀏覽器不兼容的問題

3.內嵌框架<iframe></iframe>

屬性：src表示添加內嵌內容的路徑

name表示這個框架的名字

width表示這個框架的寬度

height表示這個框架的高度

frameborder表示內嵌框架的邊框

scrolling表示是否出現滾動條

作用：

1、將多個網頁重復的部分抽取出來，通過內嵌框架的方式，放到各個網頁中

2、使用<a>標簽跳轉到指定的框架中，先在指定要跳轉到的框架中取一個name，使用target=“name的值”

<a>標簽一定要寫href屬性才能生效，如果不想跳轉到任何頁面，那么href="#",表示該超鏈接為空

鏈接，點擊空鏈接會刷新頁面

4.語義化結構標簽：主要是為了讓結構更加清晰化

<header>表示頁面頭部內容

<section>表示頁面主體內容

<footer>表示頁面底部內容

<nav>表示導航欄內容

<aside>表示側邊欄內容

<article>表示頁面獨立文章內容

三、表單元素

1.表單<form></form>

屬性：1、method表示表單的提交方式，有兩個值，第一個叫post，第二個叫get

get方式的請求會將表單中所有表單元素信息顯示在地址欄中

post方式的請求必須有一個服務器來處理請求，所有表單元素的信息不會顯示在地址欄中，在實際開發中一般使用post方式請求

2、action表單要提交的位置

2.表單元素

語法：

屬性： name表示input標簽的名字

value表示input標簽的值

type表示input標簽的元素類型

文本框：專門用來輸入文字

語法：<input type="text" name="userName" value="admin"/>，type的值為text

size表示文本框的長度

maxlength表示允許輸入的最大字符長度

密碼框：用來輸入密碼

語法：<input type="password" name="userName" value="admin"/>，

type的值為password

size表示文本框的長度

maxlength表示允許輸入的最大字符長度

單選按鈕

<input type="radio" name="sex" value="boy"/>男

<input type="radio" name="sex" value="girl"/>女

注意：單選按鈕的每個input中的name值必須相同，不然不能實現選擇一個切換的作用

checked屬性表示默認選中

復選框

<input type="checkbox" name="hobby" value="" />打游戲

<input type="checkbox" name="hobby" value="" checked/>睡覺

<input type="checkbox" name="hobby" value="" />出去約會

復選框可以選擇多個，并且可以取消

checked屬性表示默認選中

下拉列表框

<select>表示定義了一個列表框

<option>表示列表項

</select> selected表示默認選中

按鈕

1、提交按鈕submit，它可以將表單中的信息提交到指定的位置

2、重置按鈕reset，它可以將表單中的信息恢復到默認值

3、普通按鈕button，它只是單純起一個按鈕的作用，需要和JavaScript和jQuery一起使

用，實現各種功能

4、圖片按鈕image，src表示圖片的路徑，也具有提交作用

多行文本域：需要輸入多行文字

<textarea>表示定義了一個多行文本域

cols表示文本域的寬度

rows表示文本域的高度

文件域：上傳文件

需要設置編碼屬性enctype="multipart/form-data"，表示將表單數據分為多部分提交

郵箱：可以進行郵箱驗證

網址：可以進行網址驗證

數字：提供輸入數字

min表示允許的最小值

max表示允許的最大值

step表示每次增加或者減少的數字間隔

value表示默認值

搜索框：可以搜索提示關鍵字的文本框

3.表單的高級應用

1、隱藏域：主要應用于在提交信息時不想讓用戶看到的信息進行隱藏提交

2、只讀和禁用屬性

只讀：表示在網站上用戶只能夠查看，不能夠修改的數據，使用readonly添加只讀

禁用：一般表示在滿足某個條件之后，才能使用的功能，使用disabled添加禁用

3、表單元素的標注

①選擇要點擊后跳轉文本加上<label>標簽

②選擇跳轉對應的表單元素，給它加上id這個屬性（id屬性值在整個網頁只能出現一

次，不可以有重復的id值）

③在<label>中添加for屬性，然后屬性值為對應的id值

4.表單的初步驗證

為什么要進行表單驗證

1、減輕服務器的壓力

2、保證數據的可行性和安全性

5.驗證的方法

1、placeholder表示這個表單元素期待用戶輸入什么信息，它是起提示作用，當用戶輸入

內容時，提示信息隱藏

2、required表示表單元素填寫內容不能為空，使用了required的該表單元素必須填寫

3、pattern表示表單中的內容必須和輸入的正則表達式一致

^表示正則表達式的開始

$表示正則表達式的結束

[]表示在中括號中任選其中一個

\d表示匹配0~9之間的任意一個數

{n}表示前面的一種匹配方式匹配的次數，表示匹配n次

-表示就是-

\w表示匹配所有字母或數字或下劃線

\u4E00-\u9FA5匹配漢字

{4,10}表示匹配前面的一種匹配方式4~10次

A-Z表示匹配大寫的英文字母

a-z表示匹配小寫的英文字母

|表示或者

四、初識CSS3

1.CSS:層疊樣式表，它是專門用來設計網頁風格的

2.CSS的優點

1、內容與表現分離，便于網頁維護

2、網頁的表現統一，統一風格

3、豐富的樣式，使得頁面布局更加靈活

4、減少網頁的代碼量，增加網頁的瀏覽速度

5、運用獨立于頁面的CSS，有利于網頁被搜索引擎收錄

3.CSS樣式的語法

選擇器{

聲明(可以為1~n條)

屬性:屬性值;

}

選擇器：需要添加這些聲明的元素（標簽）

聲明：由屬性和屬性值組成，中間用“:”,使用“;”結尾

4.在html中添加樣式的方式

1、行內樣式

在需要添加樣式的標簽中，添加一個style屬性，在style屬性中添加聲明

2、內部樣式

在里面添加一個,然后通過選擇器和聲明添加樣式

3、外部樣式

它可以實現表現與內容的徹底分離，可以讓樣式表重復使用，便于維護和修改，并且

可以極大的減少代碼量

①鏈接外部樣式表

語法：

href表示引用的哪一個外部樣式表

rel表示使用的是樣式表

type表示文本類型為css類型

②導入外部樣式表

語法：@import url(“css/第一個外部樣式.css”);

區別：鏈接外部樣式表它是先將外部的CSS樣式添加到網頁中進行加載，再加載網頁的

內容，導入外部樣式表是先加載網頁中的內容，再進行外部樣式表的加載

樣式表的優先級別

行內樣式>內部樣式>外部樣式，遵循“就近原則”

5.CSS3中的選擇器

一、基本選擇器

1、標簽選擇器：以標簽名稱作為選擇器的名稱

選擇所有網頁的該標簽元素，比如：p表示選擇該網頁中所有的p標簽

2、類選擇器：以類的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“.”，類

名能夠重復使用

3、id選擇器：以id的名稱作為選擇器的名稱，并且在選擇器的名稱前加上“#”，id

名在該網頁只能出現一次，具有唯一性

選擇器的優先級

id選擇器>類選擇器>標簽選擇器

二、層次選擇器

1、后代選擇器

語法：E F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的后代元素

比如：body p{},表示匹配所有body的后代p元素

2、子選擇器

語法：E>F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的子元素

比如：body>p{},表示匹配所有body的子元素中的p元素

3、相鄰兄弟選擇器

語法：E+F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的相鄰兄弟元素

比如：.p1+p{},表示匹配.p1的相鄰元素并且為p元素，只匹配后面的元素

4、通用兄弟選擇器

語法：E~F{聲明}，E表示的是被匹配的元素，F表示被匹配的E的所有兄弟元素

比如：.p1~p{},表示匹配.p1的所有兄弟元素并且為p元素，只匹配后面的

元素

三、結構偽類選擇器

1、語法：E>F:first-child，E表示的是被匹配的元素，F表示被匹配的F:first-

child表示被匹配的E的子元素中第一個元素并且這個元素是F元素

2、語法：E>F:last-child，E表示的是被匹配的元素，F表示被匹配的F:last-

child表示被匹配的E的子元素中最后一個元素并且這個元素是F元素

3、語法：E>F:nth-child(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-

child(n)表示被匹配的E的子元素中最后一個元素并且這個元素是F元素

even表示匹配所有偶數行

odd表示匹配所有奇數行

4、語法：E>F:nth-of-type(n)，E表示的是被匹配的元素，F表示被匹配的F:nth-

of-type(n)表示被匹配的E的子元素中所有的F元素，然后再去找第n個

E>F:nth-child(n)表示先匹配所有的兒子，再去找第幾個兒子是不是F元素，如果是

就能匹配，E>F:nth-of-type(n)先匹配所有F元素，再去找第幾個元素

四、屬性選擇器

1、E[attr],E表示匹配的E元素，attr表示屬性，匹配具有attr屬性的E元素

2、E[attr=val],匹配具有attr屬性，并且屬性值為val的E元素

3、E[attr^=val],匹配具有attr屬性，并且屬性值以val開頭的E元素

4、E[attr$=val],匹配具有attr屬性，并且屬性值以val結尾的E元素

5、E[attr*=val],匹配具有attr屬性，并且屬性值中包含val的E元素

六、CSS3美化網頁元素

前言：<span>這個標簽沒有任何實際意義，它只是為了突出顯示某個部分，它是一個行內元素，不能夠獨

占一行，并且該元素所占的區域是根據內容大小決定，不會因為改變寬度和高度改變它的大小

<div>這個標簽沒有任何實際意義,它只是為了將某些部分裝起來，它是一個塊元素，會獨占一行，

并且該元素所占的區域是根據它的寬度和高度決定，會因為改變寬度和高度改變它的大小

1.字體樣式：

1、font-family字體類型，字體類型的值有：“楷書”、“隸書”、“微軟雅黑”、英文字體

可以寫多個字體格式，使用“，”隔開，如果同時存在英文和中文字體，英文就顯示

英文字體，中文就顯示中文字體，并且英文字體要放在中文字體前面

2、font-size字體大小，就是改變字體大小，字體大小的單位使用px

3、font-style

字體風格，normal正常的（默認）、italic（傾斜的）、oblique（傾斜的）

4、font-weight字體粗細，bold（粗體）、bolder（更粗的）、lighter（細的）

font字體屬性，需要滿足字體屬性設置順序，風格=》粗細=》大小=》類型

2.文本樣式：

1、color

文本顏色

①使用英文單詞去表示顏色

②使用十六進制的方式表示，并且如果相鄰的兩兩數字相同，可以縮寫為一位

③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值從0~255

a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明

2、text-align

水平對齊方式，設置文本的水平對齊方式

屬性值：center居中，left居左，right居右

3、vertical-align垂直對齊方式，設置文本的水平對齊方式

屬性值：middle居中，top居上，bottom居下

4、text-indent設置文本首行縮進，屬性值一般使用em相對單位，em表示長度為文本字符

大小的長度

5、line-height設置文本行高，屬性值使用px為單位，還可以設置為倍數

6、text-decoration

文本裝飾

屬性值：①none表示沒有任何裝飾

②underline表示下劃線

③overline表示上劃線

④line-through表示刪除線

7、text-shadow文本陰影

語法：text-shadow : color x-offset y-offset blur-radius; color陰影顏色

x-offset表示X軸偏移量，正數往右偏移，負數往左偏移

y-offset表示Y軸偏移量，正數往下偏移，負數往上偏移 blur-radius表示模糊半徑

2.超鏈接偽類

1、a:link單擊訪問前的超鏈接樣式

2、a:visited單擊訪問后的超鏈接樣式

3、a:hover鼠標懸浮的超鏈接樣式

4、a:active鼠標單擊未釋放的超鏈接樣式

列表樣式

1、list-style-type表示設置列表的標記類型

常用類型：none表示沒有標記

disc表示實心圓點

square表示實心正方形

circle表示空心圓點

decimal表示數字

2、list-style-image使用圖像代替標記

3、list-style-position表示在哪個位置使用標記

4、list-style設置列表屬性，通常使用這個屬性

3.背景樣式

1、背景顏色background-color

①使用英文單詞去表示顏色

②使用十六進制的方式表示，并且如果相鄰的兩兩數字相同，可以縮寫為一位

③使用三原色的方式去表示，語法：rgb(r,g,b)，rgba(r,g,b,a)

r,g,b取值從0~255

a表示透明度，取值從0~1,0表示完全透明，1表示完全不透明

有一個特殊值，transparent表示透明的意思，它是默認值

2、背景圖片background-image

url表示的圖片路徑

3、背景重復方式background-repeat

repeat表示沿水平方向和垂直方向進行重復

no-repeat表示不重復

repeat-x表示沿水平方向重復

repeat-y表示沿垂直方向重復

4、背景位移background-position：X軸方向偏移量 Y軸方向偏移量

①可以使用像素值來表示偏移量，比如：50px 50px;

②可以使用百分比來表示偏移量，比如：20% 50%;

③可以使用英文字母來表示偏移量，比如：center middle;

5、背景屬性設置所有的背景樣式

6、背景尺寸background-size

①auto表示背景圖片保持原樣，默認值

②percentage表示背景圖片大小根據容器大小的百分比決定大小，只寫一個值表示只

對一個值進行設置，另外一個值會根據圖片本身的比例等比例縮放

本身比例為4:3

400px 300px

800px 600px

1200px 900px

③直接使用像素值px來設置圖片大小，只設置一個值和百分比一樣

④cover放大充滿整個容器

⑤contain放大充滿整個容器，如果有一個方向充滿了整個容器，那么不在放大

4.漸變

1、線性漸變

：顏色沿著一條直線過渡

linear-gradient(漸變方向,顏色1，顏色2，顏色n)

不加前綴方向使用“to 方向”表示往哪個方向進行漸變，加上前綴之后使用“方向”

表示從哪個方向開始漸變

2、徑向漸變：從一個起點朝所有方向混合

-radial-gradient(漸變方向,顏色1，顏色2，顏色n)

5.瀏覽器前綴：(避免兼容問題)

IE瀏覽器前綴-ms-

Chrome瀏覽器前綴-webkit-

Safiri瀏覽器前綴-webkit-

Opera瀏覽器前綴-o-

Firefox瀏覽器前綴-moz-

七、盒子模型

1.盒子模型：就是一個虛擬的矩形容器

2.盒子模型的組成：

1、content（內容）：表示主要內容

2、padding（內邊距）：表示內容與邊框之間的距離

3、border（邊框）：表示包著內容的外框，邊框是有一定寬度的

4、margin（外邊距）：表示邊框外部與其他盒子的距離

3.邊框border

1、border-color邊框顏色

①使用英文字母來表示顏色

②使用十六進制來表示顏色

③使用三原色來表示顏色，rgb(),rgba()

所有的塊元素都是一個盒子模型

border-top-color上邊框，border-bottom-color下邊框

border-left-color左邊框，border-right-color右邊框

※※※※※※※

可以使用border-color去設置，可以取1~4個值任意一個

如果設置一個值表示對應所有的方向

如果設置兩個值，第一個值表示上邊框和它對應邊框的值，第二個值表示右邊框和它

對應的值

如果設置三個值，第一個值表示上邊框，第二個值表示右邊框和它對應的值，第三個

表示下邊框的值

如果設置四個值，第一個值表示上邊框，第二個值表示右邊框，第三個值表示下邊框，

第四個值表示左邊框，按照順時針的順序依次設置

2、border-width邊框的粗細

使用像素值去設置邊框的粗細，網頁一般使用這種方式

設置邊框顏色的方式一樣

3、border-style邊框的樣式

none表示沒有邊框

solid表示實線邊框

dashed表示虛線邊框

dotted表示點線邊框

設置邊框樣式的方式和置邊框顏色的方式一樣

border邊框屬性

可以設置邊框的所有屬性，不需要按照順序

border-left設置左邊框的屬性

border-right設置右邊框的屬性

border-bottom設置下邊框的屬性

border-top設置上邊框的屬性

外邊距margin

margin-top設置上外邊距的距離

margin-right設置右外邊距的距離

margin-bottom設置下外邊距的距離

margin-left設置左外邊距的距離

可以使用margin去設置，可以取1~4個值任意一個

和設置邊框顏色的方式一樣

使用margin設置盒子居中，語法：margin：0px auto;需要滿足兩個條件

①必須為塊元素

②必須設置盒子的寬度和高度

內邊距padding

padding-top設置上內邊距的距離

padding-right設置右內邊距的距離

padding-bottom設置下內邊距的距離

padding-left設置左內邊距的距離

可以使用padding去設置，可以取1~4個值任意一個

和設置邊框顏色的方式一樣

4.盒子模型的尺寸

盒子模型的尺存分為盒子模型的寬度和高度

盒子模型的外盒寬度=內容寬度+內邊距的左右寬度+邊框左右寬度+外邊距左右寬度

盒子模型的外盒高度=內容高度+內邊距的上下高度+邊框上下高度+外邊距上下高度

盒子模型的內盒寬度=內容寬度+內邊距的左右寬度+邊框左右度

盒子模型的內盒高度=內容高度+內邊距的上下高度+邊框上下度

5.拯救布局

使用box-sizing拯救布局，有3個值

1、content-box：默認值，表示設置的寬度和高度等于內容的寬度和高度，盒子的寬度和

高度通過計算獲得

2、border-box：表示設置的寬度和高度等于盒子的寬度和高度

3、inherit：繼承父元素的盒子模型模式

6.圓角邊框border-radius：為矩形邊框設置圓角效果

語法：border-radius:可以設置1~4個值;

設置一個值會對四個角進行設置

設置兩個值，第一個值設置左上角和它對角的值，第二值是設置右上角和它對角的值

設置三個值，第一個設置左上角，第二個設置右上角和它對角的值，第三個設置右下角的值

設置四個值，第一個設置左上角，第二個設置右上角，第三個設置右下角，第四個設置左下角

設置圓形

①必須盒子的寬度和高度相同

②圓角邊框的值必須將四個角的值都設置為寬度的一半或者50%

設置上半圓：寬度不變，高度變為一半，第一個值、第二值為一半，第三和第四個為0

設置下半圓：寬度不變，高度變為一半，第一個值、第二值為0，第三和第四個為一半

設置左半圓：寬度為一半，高度變不變，第一個值、第四值為一半，第二和第三個為0

設置左半圓：寬度為一半，高度變不變，第一個值、第四值為0，第二和第三個為一半

扇形：高度和寬度都為一半，需要哪一個方向的就添加哪個角的值，其他都為0

7.盒子陰影box-shadow

語法：box-shadow:inset x-offset y-offset blur-radius color;

第一個參數表示陰影的類型，不寫為外陰影，inset表示為內陰影

第二個參數表示陰影的水平偏移量，正數往右，負數往左

第三個參數表示陰影的垂直偏移量，正數往下，負數往上

第四個參數為模糊半徑，模糊范圍大小，越往外越模糊

第五個參數為陰影顏色

八、塊元素與行內（內聯）元素

1.塊元素與行內（內聯）元素的特性

1、塊元素：獨占一行，并且可以設置元素的寬高(div,h1-h6,p,列表)

2、行內元素：不是獨占一行，設置寬高對它不起作用，寬度由元素內容撐開。

2.display:顯示（元素以哪種形式進行顯示）

1、block：塊級元素的默認值，在元素前后會有換行

2、inline:行內元素的默認值，元素前后沒有換行

3、inline-block:行內塊元素，元素既有行內元素的特性(可以和其他元素顯示在同一行)又有塊級元素的特性（可以設置寬高）。

4、none:該元素不被顯示。

3.float:浮動:使得塊級元素排列在同一行

1、left:左浮動

2、right：右浮動

3、none:元素不浮動，按照標準文檔流顯示

4.clear：清除浮動

1、left：清除元素左邊的浮動

2、right:清除元素右邊的浮動

3、both：清除兩側

4、none:默認值，不清除浮動

5.解決父級邊框塌陷的方法

1、在浮動元素的后面加空div，并且給這個空div設置樣式：clear：both

2、給父級設置高度height

3、給父級添加屬性overflow:auto;

4、給父級添加偽類after

#father:after{

content:’’;

display:block;

clear:both

}

6.overflow:屬性用來處理溢出

1、visible:可見的，內容元素會被顯示出來，但是在父級邊框的外面

2、hidden:內容元素會被顯示在邊框里，但是超出的部分會被隱藏

3、scroll:內容元素會被隱藏，但是瀏覽器會提供滾動條，滾動以顯示超出的內容

4、auto:當內容元素超出父級的高度時就提供滾動條以顯示超出的內容，若內容未超出就不顯示滾動條。

九、定位與動畫

1.定位屬性:position

1、static:默認值，沒有定位

2、relative：相對定位，相對于元素原本的位置進行偏移，元素原來的位置會被保留，浮動元素設置相對定位后，是相對元素浮動以后的位置進行偏移。

3、absolute:絕對定位，相對于離元素最近的已經設置定位屬性的祖先元素為基準進行偏移，元素原來的位置不會被保留，如果沒有已經定位的祖先元素，則以瀏覽器窗口為基準進行偏移。

4、fixed：固定定位，以瀏覽器窗口為基準進行偏移。

5、定位的元素的層級會比未定位的元素的級別更高，相對定位通常用于給父元素設置定位屬性，但是不設置不偏移量，結合絕對定位使用，固定定位用于廣告欄，返回頂部的圖標，樓層導航等。

6、z-index：改變定位元素的堆疊順序，值為整數，值越大，級別越高，顯示在最上面。

2.動畫

1、變形

語法:transform:變形函數;

2、平移函數：translate(x,y);x代表水平方向的位移，y代表垂直方向的位移，單位為px；

3、縮放函數：scale(x,y);x代表元素寬度的縮放量，y代表高度的縮放量。

4、傾斜函數：skew(x,y);x代表元素水平方向的傾斜度數，y代表垂直方向的傾斜度數，單位是deg。

5、旋轉函數：rotate(x);x代表旋轉的度數，為正數時順時針旋轉，為負數時逆時針旋轉。

2、過渡transition：是一種動畫轉換過程，漸慢，漸快等。

語法：transition:過渡樣式的屬性過渡花費的時間過渡函數(過渡的速度) 過渡的延遲時間；

1)使用步驟

A、在元素默認樣式中聲明元素默認的樣式

B、聲明元素最終呈現的樣式，如懸浮(hover)，獲取焦點(focus)時的樣式

C、在元素默認的樣式中添加過渡屬性。

3、過渡函數：

1、ease：默認值，由快到慢

2、linear:勻速

3、ease-in:越來越快

4、ease-out:越來越慢

5、ease-in-out:先越來越快再越來越慢

3.動畫animation

1、創建關鍵幀(瀏覽器兼容前綴是加在@與keyframes中間的)

語法：@keyframes 動畫名稱{

0%{元素樣式}

25%{元素樣式}

…

}

4.調用動畫

在元素樣式中調用

語法：animation:動畫名稱動畫次數動畫播放的方向動畫播放狀態

1)、動畫播放次數：為整數，默認值為1，無限循環infinite

2)動畫發生的操作：forwards(向前) backwards（向后） both（既可以向前又可以向后）

3)動畫播放狀態：running(播放) paused(暫停)

4)動畫播放方向：normal（向前） alternate(偶數次向前)

在線咨詢

上一篇：資深 Web 開發的經驗之談：為什么你開發的網頁不應該大于 14KB？
下一篇：HTML表單及其Input輸入類型

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html中滾動字體的設置

言

相關屬性介紹

-webkit-text-fill-color

-webkit-text-stroke

text-shadow

-webkit-background-clip