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:(逐漸變慢)預設值;transition: property duration timing-function delaylinear:(勻速);
ease-in:(加速);
ease-out:(減速);
ease-in-out:(先加速後減速);
cubic-bezier 貝塞爾曲線( x1, y1, x2, y2 ),貝塞爾曲線鏈結
//集合樣式
利用圓角畫出半圓並排列成風車形狀,再用過渡做出滑鼠移上去時的旋轉效果
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 含義是 邊框半徑 你為這個屬性提供乙個值,就...