文本樣式
| 屬性 |
屬性值 |
說明 |
| text-shadow |
|
文本陰影 |
| text-stroke |
|
文本描邊 |
| text-overflow |
|
文本溢出 |
| word-wrap |
|
強(qiáng)制換行 |
| word-break |
|
|
| @font-face |
|
嵌入字體 |
顏色樣式
| 屬性 |
屬性值 |
說明 |
| opacity |
|
透明度 |
| rgba(R, G, B,A) |
RGBA顏色 |
|
| oackground:linear-gradient(方向, 開始顏色, 結(jié)束顏色) |
線性漸變 |
|
| ackground:radial-gradient(位置，開始色，結(jié)束色) |
徑向漸變 |
|
邊框樣式
| 屬性 |
屬性值 |
說明 |
| border-radius |
px/em /百分比 |
圓角效果 |
| box-shadow |
數(shù)值 |
邊框陰影 |
| border-colors |
色值 |
多色邊框 |
| border-image |
url（圖片路徑） |
邊框背景 |
背景樣式
| 屬性 |
屬性值 |
說明 |
| background-size |
數(shù)值 |
背景大小 |
| background-origin |
|
背景位置 |
| background-clip |
|
背景剪切 |
CSS3變形
| 屬性 |
屬性值 |
說明 |
| transform: translate() |
數(shù)值 |
平移 |
| transform: scale() |
數(shù)值 |
縮放 |
| transform: skew() |
數(shù)值 |
傾斜 |
| transform: rotate0 |
度數(shù) |
旋轉(zhuǎn) |
| transform-origin |
數(shù)值 |
改變中心原點(diǎn) |
CSS3過度
| 屬性 |
屬性值 |
說明 |
| transition-property |
屬性名稱 |
對(duì)元素的哪一個(gè)屬性進(jìn)行操作 |
| transition-duration |
s |
過渡的持續(xù)時(shí)間 |
| transition-timing-function |
速率曲線值 |
過渡的速率變化方式 |
| transition-delay |
s |
過渡的延遲時(shí)間(可選參數(shù)) |
| transition |
過渡屬性 過渡時(shí)間 過渡方式 延遲時(shí)間 |
復(fù)合屬性 |
CSS3動(dòng)畫
| 屬性 |
屬性值 |
說明 |
| animation-name |
屬性名稱 |
對(duì)哪一個(gè)CSS屬性進(jìn)行操作 |
| animation-duration |
s |
動(dòng)畫的持續(xù)時(shí)間 |
| animation-timing-function |
速率曲線值 |
動(dòng)畫的速率變化方式 |
| animation-delay |
s |
動(dòng)畫的延遲時(shí)間 |
| animation-iteration-count |
數(shù)值 |
動(dòng)畫的播放次數(shù) |
| animation-direction |
|
動(dòng)畫的播放方向，正向還是反向 |
| animation-play-state |
|
播放狀態(tài) |
| animation |
復(fù)合屬性 |
|
多列布局
| 屬性 |
屬性值 |
說明 |
| column-count |
數(shù)值 |
列數(shù) |
| column-width |
數(shù)值 |
每一列的寬度 |
| column-gap |
數(shù)值 |
兩列之間的距離 |
| column-rule |
寬度值 樣式值 顏色值 |
分隔線樣式 |
| column-span |
|
定義跨列樣式 |
彈性盒模型
| 屬性 |
屬性值 |
說明 |
| flex-grow |
數(shù)值 |
定義子元素的放大比例 |
| flex-shrink |
數(shù)值 |
定義子元素的縮小比例 |
| flex-basis |
數(shù)值 |
定義子元素的寬度 |
| flex |
數(shù)值 |
flex-grow、flex-shrink、flex-basis 的復(fù)合屬性 |
| flex-direction |
row（橫向排列） row-reverse（橫向反向排列） column（縱向排列） column-reverse（縱向反向排列） |
定義子元素的排列方向 |
| flex-wrap |
nowrap（單行顯示） wrap（多行顯示） wrap-reverse（反向多行顯示） |
定義子元素是單行顯示，還是多行顯示 |
| flex-flow |
flex-direction、flex-wrap的復(fù)合屬性 |
|
| order |
數(shù)值 |
定義子元素的排列順序 |
| justify-content |
flex-start（左邊） center（中間） flex-end（右邊） space-between（平均分布） space-around（平均分布） |
定義子元素在“橫軸”上的對(duì)齊方式 |
| align-items |
flex-start（上邊） center（中間） flex-end（下邊） baseline（基線） stretch（適應(yīng)父元素高度） |
定義子元素在“縱軸”上的對(duì)齊方式 |
其他樣式
| 屬性 |
屬性值 |
說明 |
| outline |
寬度 樣式 顏色 |
定義文本框的輪廓線樣式 |
| initial |
CSS屬性名稱 |
重置CSS屬性的取值 |
| calc()函數(shù) |
表達(dá)式 |
計(jì)算CSS屬性的取值 |
| overflow-X |
visible（默認(rèn)） hidden（剪切內(nèi)容，示y軸滾動(dòng)條而） scroll（顯示所有滾動(dòng)條） auto（顯示所有滾動(dòng)條） |
定義內(nèi)容超出元素“寬度”時(shí)應(yīng)該如何處理 |
| overflow-y |
visible（默認(rèn)） hidden（剪切內(nèi)容，示x軸滾動(dòng)條而） scroll（顯示所有滾動(dòng)條） auto（顯示所有滾動(dòng)條） |
定義內(nèi)容超出元素“高度”時(shí)應(yīng)該如何處理 |
| pointer-events |
auto（否） none（是）文章來源：http://www.zghlxwxcb.cn/news/detail-771930.html |
是否禁用鼠標(biāo)單擊事件文章來源地址http://www.zghlxwxcb.cn/news/detail-771930.html |
到了這里，關(guān)于CSS新手入門筆記整理：CSS3屬性表的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
