記一些css屬性總結(一)

2021-10-12 07:37:38 字數 3040 閱讀 4941

(以上為為我自言自語可跳過~)

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對行內元素無效...