關於CSS3的知識點（圓角 過渡）

2021-08-19 01:59:50 字數 1821 閱讀 9534

dom文件中結構如下：
設定引數：各種長度單位都可以：px，%，…，%有時很方便，但寬高不一致時不太好

1、引數個數1：四個方向都一樣-----------border-radius: 一樣

當寬、高相同時，四個方向設定相同的數值可以將正方形轉變成乙個圓：

css樣式如下:

div
效果圖如下：

2、引數個數2：對角-----------border-radius: 左上&右下  右上&左下

css樣式如下:

div
效果圖如下：

3、引數個數3：斜對角-----------border-radius: 左上  右上&左下  右下

css樣式如下:

div
效果圖如下：

4、引數個數4：全部，順時針-----------border-radius: 左上  右上  右下  左下

css樣式如下:

div
效果圖如下：

transition-property：要運動的樣式（

all || [attr] || none

）transition-duration：規定完成過渡效果需要多少秒或毫秒

transition-delay：定義動畫延遲多久開始

transition-timing-function：運動速度曲線。

ease：（逐漸變慢）預設值；

linear：（勻速）；

ease-in：(加速)；

ease-out：（減速）；

ease-in-out：（先加速後減速）；

cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ），貝塞爾曲線鏈結

transition: property duration timing-function delay

//集合樣式

利用圓角畫出半圓並排列成風車形狀，再用過渡做出滑鼠移上去時的旋轉效果

dom文件中結構如下：
css樣式如下：

.div1


.div1:hover


.div1 div


.div1 div:nth-child(1)


.div1 div:nth-child(2)


.div1 div:nth-child(4)


.div1 div:nth-child(3)
效果圖如下：

CSS3 知識點總結

1.border radius border radius設定的值越大，弧度越大，可以用具體數值10px來設定，也可以用20 百分比來設定 你也可以只設定乙個或其中幾個角的弧度，就像這樣 div 2.box shadow 用來設定乙個下拉陰影得框，語法如下 box shadow h shadow v...

CSS3常用知識點

1 css3選擇器 1.1 屬性選擇器 e attr val 表示的乙個單獨的屬性值 這個屬性值是以空格分隔的 attr2 a class kawa e attr val 表示的要麼乙個單獨的屬性值 要麼這個屬性值是以 分隔的 attr3 a class kawa e attr val 表示的屬性值...

關於CSS3圓角

一 css3圓角的優點 減少維護的工作量。檔案的生成 更新 編寫網頁 這些工作都不再需要了。提高網頁效能。由於不必再發出多餘的http請求，網頁的載入速度將變快。二 border radius屬性 css3圓角只需設定乙個屬性 border radius 含義是 邊框半徑 你為這個屬性提供乙個值，就...