CSS3 選擇器和過渡

.first ~ li{}：查詢新增了.first樣式的元素後面的所有兄弟li元素

3.偽類選擇器

4.字型效果

5.盒模型

6.邊框陰影

1.漸變：漸變產生的是影象，所以需要使用background

/*方向：
to top:0deg
to right:90deg
to bottom:180deg --預設值
to left:270deg*/
/*background: linear-gradient(to right,red,blue);*/
background
:linear-gradient
(to right,red 0%,red 50%,blue 80%,blue 100%)
;

形狀shape :circle :產生正方形的漸變色 ellipse :適配當前的形狀,如果是正方形的容器，兩者效果一樣.如果寬高不一樣，預設效果切換到ellipse at position :座標，預設在正中心。可以賦值座標（參照元素的左上角），也可以賦值關鍵字(left center right top bottom) 大小size : closest-side：最近邊； farthest-side：最遠邊； closest-corner：最近角； farthest-corner：最遠角。預設是最遠的角farthest-corner*/ /*background: radial-gradient(circle,red,blue);*/ /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/ background :radial-gradient (at 10px 10px,red,blue)

;

/*徑向漸變重複*/
background
:repeating-radial-gradient
(            #fff 0%,#fff 10%,
#000 10%,#000 20%)
;/*線性漸變重複*/
background
:repeating-linear-gradient
(45deg,
#fff 0%,#fff 10%,
#000 10%,#000 20%)
;

2.背景樣式

/*3.設定背景平鋪 round:會將進行縮放之後再平鋪 space:不會縮放平鋪，只是會在之間產生相同的間距值*/ background-repeat

: space;

/*4.設定在滾動容器的背景的行為：跟隨滾動/固定 fixed:背景的位置固定不變 scroll:當滾動容器的時候，背景也會跟隨滾動*/ /*local和scroll的區別：前提是滾動當前容器的內容 local:背景會跟隨內容一起滾動 scroll:背景不會跟隨內容一起滾動*/ background-attachment

: fixed;

/*contain:按比例調整大小，使用寬高自適應整個元素的背景區域，使全部包含在容器內 /*background-size: contain;*/ /*cover:與contain剛好相反，背景會按比例縮放自適應整個背景區域，如果背景區域不足以包含所有背景，內容會溢位 background-size

: contain;

/*設定背景座標的原點 border-box:從border的位置開始填充背景，會與border重疊 padding-box:從padding的位置開始填充背景，會與padding重疊 content-box:從內容的位置開始填充背景*/ background-origin : content-box; /*設定內容的裁切:設定的是裁切，控制的是從**顯示 border-box:其實是顯示border及以內的內容 padding-box:其實是顯示padding及以內的內容 content-box:其實是顯示content及以內的內容*/ background-clip

: content-box;

3.過渡

/*新增過渡效果:過渡效果執行完畢之後，缺省會還原到原始狀態*/ /*1.transition-property:新增過渡效果的樣式屬性名稱*/ transition-property : left; /*2.transition-duration:過渡效果的耗時以秒做為單位*/ transition-duration : 2s; /*3.transition-timing-function:設定時間函式--控制運動的速度*/ transition-timing-function : linear; /*4.transition-delay:過渡效果的延遲*/ transition-delay : 2s; /*簡寫 transition:屬性名稱過渡時間時間函式延遲*/ transition : left 2s linear 0s; /*為多個樣式同時新增過渡效果*/ transition

: left 2s linear 0s,background-color 5s linear 0s;

CSS3 選擇器和過渡

css3 選擇器 CSS3選擇器

css3 選擇器 CSS3選擇器詳解

CSS3選擇器屬性選擇器

CSS3 選擇器和過渡

css3 選擇器 CSS3選擇器

css3 選擇器 CSS3選擇器詳解

CSS3選擇器 屬性選擇器

相關推薦

CSS3選擇器屬性選擇器