成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3重要語(yǔ)法匯總

zhiwei / 1019人閱讀

摘要：屬性指定了列與列間的邊框樣式屬性指定了兩列的邊框厚度屬性指定了兩列的邊框顏色屬性是所有屬性的簡(jiǎn)寫。屬性指定了列的寬度。多媒體查詢代碼除那些設(shè)備特定的媒體類型代碼

線性漸變

linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet)
linear-gradient(指定漸變方向, 顏色的起點(diǎn)，顏色的結(jié)束)

文本溢出于省略標(biāo)記

text-overflow:ellipsis; （溢出文本顯示省略號(hào)）
overflow:hidden; （溢出內(nèi)容為隱藏）
white-space:nowrap; （強(qiáng)制文本在一行內(nèi)顯示）

文字與字體之嵌入字體

@font-face {

font-family : 字體名稱;
src : 字體文件在服務(wù)器上的相對(duì)或絕對(duì)路徑;

}

文字與字體之文本陰影

text-shadow: 水平偏移距離 垂直偏移距離 模糊程度 顏色

背景圖片裁剪
background-clip ： border-box | padding-box | content-box | no-clip
background-clip ： 邊框 | 內(nèi)填充 | 內(nèi)容 | 不裁剪

屬性選擇器通配符

a[屬性^="value"] 以value開頭
a[屬性$="value"] 以value結(jié)尾
a[屬性*="value"] 任意位置

結(jié)構(gòu)性偽類選擇器 
子選擇器 例如#a>p 選擇#a的所有子類(直接子類)

相鄰選擇器 選擇緊接在另一個(gè)元素后的元素，有相同的父元素。只選擇第一個(gè)相鄰的匹配元素

~ 匹配選擇器 例如#b~p匹配所有在#b元素之后的所有p元素
:root 選擇當(dāng)前匹配元素根元素 :root === html
:not 選擇除某個(gè)元素之外的所有元素 input:not([屬性="value"])
:empty 用來(lái)選擇沒(méi)有任何內(nèi)容的元素
:first-child 選擇父元素的第一個(gè)子元素
:last-child 選擇父元素的最后一個(gè)子元素
:nth-child(n) 定位某個(gè)父元素的一個(gè)或多個(gè)特定的子元素 ,其中“n”是其參數(shù)，而且可以是整數(shù)值(1,2,3,4)，也可以是表達(dá)式(2n+1、-n+5)
:nth-last-child(n) 從某父元素的最后一個(gè)子元素開始計(jì)算，來(lái)選擇特定的元素。
:first-of-type 定位一個(gè)父元素下的某個(gè)類型的第一個(gè)子元素
:nth-of-type(n) 定位于父元素中某種類型的子元素
:last-of-type 選擇是父元素下的某個(gè)類型的最后一個(gè)子元素
:enabled 對(duì)可用狀態(tài)表單元素設(shè)置樣式
:disabled 對(duì)不可用狀態(tài)表單元素設(shè)置樣式
:checked 對(duì)選中狀態(tài)元素設(shè)置樣式
::selection 突出顯示的文本
:read-only 指定處于只讀狀態(tài)元素的樣式 元素中設(shè)置了“readonly=’readonly’”
:read-write 指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。
::before和::after 用來(lái)給元素的前面或后面插入內(nèi)容

CSS3變形

旋轉(zhuǎn)rote()
扭曲 skew()
縮放 scale()
位移 translate()

css3動(dòng)畫過(guò)渡屬性

transition-property:指定過(guò)渡或動(dòng)態(tài)模擬的CSS屬性
transition-duration:指定完成過(guò)渡所需的時(shí)間
transition-timing-function:指定過(guò)渡函數(shù)
transition-delay:指定開始出現(xiàn)的延遲時(shí)間
transition ：簡(jiǎn)寫屬性設(shè)置四個(gè)過(guò)渡屬性
transition(transition-property,transition-duration,transition-timing-function,transition-delay)
transition(css屬性，過(guò)渡時(shí)間，過(guò)渡函數(shù)，延遲時(shí)間)
transition(all 0 ease 0)默認(rèn)

css3動(dòng)畫

Keyframes：關(guān)鍵幀 @keyframes 動(dòng)畫名稱{…}
animation-name：動(dòng)畫名稱
animation-duration: 動(dòng)畫時(shí)間
animation-timing-function：動(dòng)畫播放方式
animation-delay：定義動(dòng)畫開始播放時(shí)間
animation-iteration-count：設(shè)置動(dòng)畫播放次數(shù)
animation-direction：動(dòng)畫播放方向
animation-play-state：播放狀態(tài)
animation-fill-mode：定義在動(dòng)畫開始之前和結(jié)束之后發(fā)生的操作

css3多列

column-count：指定了需要分割的列數(shù)。
column-gap 屬性指定了列與列間的間隙。
column-rule-style 屬性指定了列與列間的邊框樣式：
column-rule-width 屬性指定了兩列的邊框厚度:
column-rule-color 屬性指定了兩列的邊框顏色：
column-rule 屬性是 column-rule-* 所有屬性的簡(jiǎn)寫。
column-width 屬性指定了列的寬度。

css3多媒體查詢

@media not|only mediatype and (expressions) {

CSS 代碼...;

}
@media 除那些設(shè)備|特定的媒體類型 and (expressions) {

CSS 代碼...;

}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113131.html

相關(guān)文章

  • GitHub 值得收藏的前端項(xiàng)目[每月更新...]

    摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁(yè)的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來(lái)，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

    maxmin 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 可能是最全的前端動(dòng)效庫(kù)匯總

    摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動(dòng)效庫(kù)。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動(dòng)畫資源庫(kù)之一。可能是創(chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^(guò)安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫(kù)。 收集日期為2019-02-28，★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動(dòng)效基礎(chǔ)庫(kù)，是許多基礎(chǔ)動(dòng)...

    afishhhhh 評(píng)論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

zhiwei

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<