css3重要語法匯總

zhiwei 發布于2019-08-29 15:09 / 1014人閱讀

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

線性漸變

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

文本溢出于省略標記

text-overflow:ellipsis; （溢出文本顯示省略號）
overflow:hidden; （溢出內容為隱藏）
white-space:nowrap; （強制文本在一行內顯示）

文字與字體之嵌入字體

@font-face {

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

}

文字與字體之文本陰影

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

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

屬性選擇器通配符

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

結構性偽類選擇器

子選擇器 例如#a>p 選擇#a的所有子類(直接子類)

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

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

CSS3變形

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

css3動畫過渡屬性

transition-property:指定過渡或動態模擬的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-timing-function:指定過渡函數
transition-delay:指定開始出現的延遲時間
transition ：簡寫屬性設置四個過渡屬性
transition(transition-property,transition-duration,transition-timing-function,transition-delay)
transition(css屬性，過渡時間，過渡函數，延遲時間)
transition(all 0 ease 0)默認

css3動畫

Keyframes：關鍵幀 @keyframes 動畫名稱{…}
animation-name：動畫名稱
animation-duration: 動畫時間
animation-timing-function：動畫播放方式
animation-delay：定義動畫開始播放時間
animation-iteration-count：設置動畫播放次數
animation-direction：動畫播放方向
animation-play-state：播放狀態
animation-fill-mode：定義在動畫開始之前和結束之后發生的操作

css3多列

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

css3多媒體查詢

@media not|only mediatype and (expressions) {

CSS 代碼...;

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

CSS 代碼...;

}

云服務器 GPU云服務器 css3 css3氣泡 css3動畫 JS+CSS3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113131.html

GitHub 值得收藏的前端項目[每月更新...]

摘要：也是一款優秀的響應式框架站點所使用的一套框架為微信服務量身設計的一套框架一組很小的，響應式的組件，你可以在網頁的項目上到處使用一個可定制的文件，使瀏覽器呈現的所有元素，更一致和符合現代標準。 GitHub 值得收藏的前端項目整理與收集的一些比較優秀github項目，方便自己閱讀，順便分享出來，大家一起學習，本篇文章會持續更新，版權歸原作者所有。歡迎github star與fork 預...

maxmin 2019-08-29 16:07 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0