C3新增的一些屬性總結

2021-08-20 12:35:53 字數 1915 閱讀 4383

c3的選擇器:

1.關係選擇器:ul>li子代選擇器

ul li後代選擇器

.now+li後乙個兄弟為li的元素

.now~li後面所有為li的兄弟元素

2.屬性選擇器:li[屬性||自定義屬性 ='值'] li裡面屬性或者自定義屬性=值的元素

li[屬性] 所有有此屬性的元素

li[屬性^='du'] 值以du字母開頭的

li[屬性$='du'] 值以du字母結束的

li[屬性*='du'] 值包含du字母的

3.偽類選擇器:li:first-child li的父元素下第乙個為li的子元素

li:last-child li的父元素下最後乙個為li的子元素

li:nth-child(下標) li的父元素下對應下標的子元素,下標從1開始

下標還可以用odd奇數或even偶數 表示下標為奇偶的的子元素

或者n n從0開始 2n+1 奇數

li:nth-of-type(下標n) 父元素下標籤為li下標為n的子元素

li:first-of-type li:last-of-type

4.偽元素選擇器: ::after{}::before{}::first-letter第乙個字 ::first-line第一行

c3中陰影設定:

文字陰影:

text-shadow:水平偏移 垂直偏移 羽化值 陰影顏色 (px px px color);

盒子陰影:

box-shadow:(inset內陰影) 水平偏移 垂直偏移 羽化值 外延值 陰影顏色 (inset + px px px px color);

c3背景設定:background系列

c3漸變:線性漸變 background-image: linear-gradient(to 方向//45deg,color,color);

徑向漸變 background-image: radial-gradient(20px at center ,color,color);

c3過渡:transition:all 1s;合寫 transitionend過渡結束事件

c3之2d轉換:transform 只能寫乙個,多了會覆蓋,合寫用空格隔開

transform: scale(1.5);縮放

transform-origin: top;設定轉換原點

transform: rotate(45deg);轉換角度

transform: translate(20px,20px);平移距離 translatex translatey

transform: skewx(45deg);斜切

c3之3d轉換:perspective: 1000px; 給有3d效果的父元素新增 顯示近大元小的3d效果

transform: rotatex(45deg) rotatey(45deg) rotatez(45deg);角度轉換

transform: translatex(20px) translatey(20px) translatez(20px);平移位置

transform-style: preserve-3d;子盒子要呈現3d效果,父盒子必須新增這個屬性

**查詢:(media query)是css3提出來的乙個新的屬性,通過**查詢可以查詢到screen的寬度,從而指定某個寬度區間的網頁布局。

用在響應式開發 原理:使用**查詢實現不同終端的布局和樣式的切換。

用法:@media screen and (條件)

條件的寫法,多個條件用and鏈結

min-width:只要螢幕寬度超過這個值的裝置樣式就能生效

max-width:只要螢幕寬度小於這個值的裝置樣式就能生效

例:@media screen and (min-width: 992px) and (max-width: 1200px)

};

類的MRO屬性 C3演算法

c3演算法 class a object pass class b a pass class c a pass class d b pass class e c pass class f d,e pass f的mro順序 第一步 找出f所有的父類的mro d dbao e ecao 第二部 把所有父...

HTML筆記(七)CSS3新增的一些屬性

一 圓角 陰影 1.圓角 border radius value 四個角 border radius value value 左上角,右下角 右上角,左下角 border radius value value value border radius value value value value 順...

css3的一些屬性

以前還沒有注意過css的一些屬性,近期發現有一些樣式很好用,現在整理一遍。keyframes 規定動畫 可以通過keyframes 改變乙個塊的樣式當然這是要配合animation屬性來結合的 keyframes mymove mymove必須定義動畫的名稱在 100 moz keyframes m...