CSS3學習筆記

一.選擇符

二.屬性

溢位隱藏：

#div4

p

文字陰影：

text-shadow: 2px 1px rgba(255,255,255,1)

圓角效果：

border-radius

邊框陰影：

box-shadow:2px 2px 5px 5px inset:內陰影

透明度：

div /* for ie8 and earlier */ div /* for ie9 and other browsers */ background :rgba(0,0,0,0.5);

//背景透明不影響元素

rgba(r,g,b,a)

r：紅色值。正整數 | 百分數 g：綠色值。正整數 | 百分數 b：藍色值。正整數 | 百分數

a：alpha透明度。取值0 - 1之間。

背景原點：

background-origin:border-box padding-box

content-box

背景裁切：

background-clip：border-box padding-box

content-box

背景大小：

background-size: cover,contain

多背景：

url(skin/p_103x196_3.jpg);w3c盒模型 ie盒模型

伸縮盒：

ul
ulli:nth-child(1)
ulli:nth-child(2)
ulli:nth-child(3)
ulli:nth-child(4)

css3變換：transform

瀏覽器原生，效能好

旋**
-webkit-transform
: rotate(45deg);
/*相容webkit瀏覽器,角度45*/
-moz-transform
:rotate(45deg);
/*相容火狐瀏覽器*/
-ms-transform
:rotate(45deg);
/*相容微軟瀏覽器*/
-o-transform
:rotate(45deg);
/*相容歐鵬瀏覽器*/
transform
:rotate(45deg);
/*最後寫*/
扭曲：    skew(x,y)
skey(25deg,25deg) 
縮放：    scale(x,y)
scale(1.5)
位移：    translate(x,y)
translate(20px,50px)
translatex()
translatey() 
中心點：  transform-origin
: top right bottom left

css3過渡：transition

縮寫方式 
transition
: all .5s ease-in .1s;
拆分方式：
transition-property
:all;
transition-duration
: .5s;
transition-timing-function
: ease-in;
transition-delay
: .1s;

css3動畫：animation

**<』 animation-name 『>：

*檢索或設定物件所應用的動畫名稱

<』 animation-duration 『>：

檢索或設定物件動畫的持續時間

<』 animation-timing-function 『>：

檢索或設定物件動畫的過渡型別

<』 animation-delay 『>：

檢索或設定物件動畫延遲的時間

<』 animation-iteration-count 『>：

檢索或設定物件動畫的迴圈次數

<』 animation-direction 『>：

檢索或設定物件動畫在迴圈中是否反向運動

<』 animation-fill-mode 『>：

檢索或設定物件動畫時間之外的狀態

<』 animation-play-state 『>：

檢索或設定物件動畫的狀態。w3c正考慮是否將該屬性移除，因為動畫的狀態可以通過其它的方式實現，比如重設樣式*

-webkit-animation
:lala 5s
ease 0.1s;
animation
:lala 5s
ease 0.1s;
@keyframes lala 
to或者
0%40%
60%100%
}

#divfather #divson

css3學習筆記

1.為什麼分許多模組進行管理？為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點第一，class屬性本身沒有語義，褚翠是用來為css樣式服務的，屬於多餘屬性。第二，使用屬性的話，並沒有把樣式與元素繫結起來，針對同乙個class屬性文字框，下拉框，按鈕都可使用。這樣很...

css3學習筆記

1，transition是過度效果，一般是和hover一起用，transition的屬性有height，width常用屬性，在hover裡面就是會覆蓋原來的屬性，屬性由逗號間隔，各個屬性之間沒有先後關係，webkit transition width 2s ease in,height 2s,web...

CSS3學習筆記

1 css是什麼？cascading style sheet 層疊樣式表，目的是對html中元素的字型顏色邊距高度寬度背景網頁定位等設定，以達到美化網頁的目的 2 css3是是前一直仍然在完善的css最新標準和規範。新加入了很多css樣式屬性，但是因為規範讓然未最終形成。所以瀏覽器支援力...

CSS3學習筆記

css3學習筆記

css3學習筆記

CSS3學習筆記

相關推薦