css3新增特性

2021-10-16 11:32:58 字數 2153 閱讀 1900

css3屬性選擇器

@media (all|screen|print|speech)(only|and|not)(min-width|max-width) (orientation:portrait|landscape)


e[attr=value]|[id=value][class=value]


e[attr~=value]屬性值等於整個詞


e[attr*=value]屬性值包含value


e[attr^=value]以value開頭


e[attr$=value]以value結尾
節點擊擇器

e:nth-child(n)|nth-last-child(n) 第n個節點


e:nth-child(odd|even|xn) 奇數|偶數|xn


e:nth-of-type(n)|nth-last-of-type(n) 同型別


empty 無子節點的(包含文字節點)


e:first-child|last-child|first-of-type|last-of-type|


only-child(某個父級下有且只有它)|only-of-type (不包含文字節點 某個父級下只要有它)


not(.textinput)所有class不是textinput的節點
偽類選擇器

e:target|disabled|enabled|checked|first-line|first-letter|selection
單行文字省略號

text-shadow:x偏移 y偏移 模糊距離 color


text-stroke:寬度 顏色


text-overflow:ellipsis


overflow:hidden


white-space:nowrap
圓角

背景裁切

background-clip:bordex-box|padding-box|content-box|no-clip


background-orign:bordex-box|padding-box|content-box


background-size:x方向 y方向
background: -webkit-linear-gradient(left,red,yellow);//線性漸變

徑向漸變

CSS3新增特性詳解

css 用於控制網頁的樣式和布局。css3 是最新的 css 標準。css3 被劃分為模組。其中最重要的 css3 模組包括 background rgba 0,0,0,0.3 div 圓角矩形設定4個角。圓角矩形可以為4個角分別設定圓度，但是是有順序的。border top left radius...

CSS3新增特性 transfrom

2d轉換 translate x offset,y offset 相對於自身位置的乙個偏移，單位可以設定px，相對自身的長寬 translatex translatey childrotate 20deg 給乙個順時針旋轉的度數，可為負 scale 2,3 元素的放大縮小 scalex scaley...

CSS3新增特性詳解（二）

上篇博文主要介紹了css3新增特性中的靜態特性，比如新的選擇器 多背景圖 陰影 漸變等。本文主要介紹css3中新增的動態特性，如過度 動畫 變形等。transitian webkit transition all 0.5s linear 0.3s 過度效果，習慣上也叫做漸變。只不過這個漸變是指為動態...