(以上為為我自言自語可跳過~)
1.transition屬性:
含義:過渡屬性,通常用於滑鼠經過元素時樣式的改變。
語法:
transition: property duration timing-function delay;
transition-property 規定設定過渡效果的 css 屬性的名稱,(全部就寫all)。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。
2.outline 屬性:
含義:outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。通常用於outline:none;去掉一些預設的藍色邊框。
語法:
outline-color 規定邊框的顏色。
outline-style 規定邊框的樣式。
outline-width 規定邊框的寬度。
3.filter(濾鏡) 屬性
含義:屬性定義了元素(通常是)的可視效果,通常就是通過filter: blur(px)設定模糊效果**
語法:
詳細~
4.屬性:clip-path屬性:
含義:很強大,可以用裁剪方式建立元素的可顯示區域,那麼區域內的部分顯示,區域外的就會隱藏。能用在很多方面。顯示各種各樣形狀的圖形。
語法:
clip-path: circle(xx);定義圓。
clip-path: ellipse(***x);定義橢圓。
clip-path: polygon(******x);定義多邊形。
***x一般是寫那個圖形的相對座標,然後每個座標點連起來形成的封閉圖形就是要顯示的內容。
5.:text-transform屬性
含義:屬性控制文字的大小寫。一般用在把一句英文不管寫的大小寫都全換成大寫。
語法:
text-transform:none 預設。
text-transform:capitalize 文字中的每個單詞以大寫字母開頭。
text-transform:uppercase 定義僅有大寫字母。
text-transform:lowercase 定義無大寫字母,僅有小寫字母。
text-transform:inherit 規定應該從父元素繼承 text-transform 屬性的值。
6. background-clip: text;
-webkit-background-clip: text;
含義:一般可以用來把背景圖只在字型裡顯示。
語法:
background-clip: text;
-webkit-background-clip: text;
7 user-select屬性
含義:能控制使用者能否選中文字。一般用來設定不能。
語法:
user-select:none |text| all | element
none:文字不能被選擇
text:可以選擇文字 (預設)
all:當所有內容作為乙個整體時可以被選擇。
element:可以選擇文字,但選擇範圍受元素邊界的約束。
8. linear-gradient
含義:線性顏色的漸變。就從左往右變,從左上往右下變…
語法:
background-image: linear-gradient(direction, color1, color2, …);
direction:用角度值指定漸變的方向(或角度)。如to bottom right,,,to top,或直接角度50deg。
9. radial-gradient
含義:徑向顏色的漸變。就是像圓形一樣從中心點擴散。
語法:
background-image: radial-gradient(shape size at position, start-color, …, last-color);
如background-image: radial-gradient(red 5%, yellow 15%, green 60%);
表示中心紅,然後到黃,最外面綠,%設定個佔多少。
shape 引數定義了形狀。它可以是值 circle 或 ellipse。其中,circle 表示圓形,ellipse 表示橢圓形。預設值是 ellipse。
10.-webkit-text-stroke
含義:文字字元指定了寬和顏色。就是可以讓字型外面有乙個有顏色的寬的的線包圍著。
語法:
如:-webkit-text-stroke: 4px red;
先這樣,後面再發~
CSS一些常用屬性總結
css選擇器 類別選擇器 id選擇器 巢狀選擇器 子選擇器 屬性選擇器 重點說巢狀選擇器和子選擇器的區別以及屬性選擇器 舉個例子 p 下有 b b 下又有另乙個 b 子選擇器 p b 巢狀選擇器 p b 上述子選擇器只能選中第乙個 b 巢狀選擇器則能選中所有的 b 屬性選擇器 a title 只要標...
CSS的一些必記屬性整理
text color 設定t程式設計客棧ext的顏色 text align 設定text的對齊 text decoration 設定text的下劃線 text transformation 設定字母的大小寫和單詞的首字母大寫 nbswww.cppcns.comp line height 設定行高 l...
CSS一些總結
1.display block 塊元素,預設寬度為100 可以設定元素的寬高,預設佔滿一行。塊元素包括div,h1 h6,form,table,ul,ol等 inline 行內元素,預設寬度為內容的寬度,width和height對inline元素無效,margin top和bottom對行內元素無效...