CSS3 Basic
2 likes1,833 views
该文档涵盖了CSS3的基本知识，包括边框、背景、变形、文字、遮罩和动画。具体介绍了边框圆角、阴影、背景图片及其尺寸、变形方法（如旋转和缩放）、文字阴影及特殊字形、遮罩图像和动画定义等内容。各个部分提供了相应的代码示例和应用案例。
CSS3 Basic
- 2. http://MobileDev.TW 大綱 1. 邊框 2. 背景 3. 變形 4. 文字 5. 遮罩 6. 動畫 CSS3 Basic 2
- 5. http://MobileDev.TW 1-1.圓角邊框 border-radius:25px; CSS3 Basic 5 左上25px 右上25px 右下25px 左下25px border-radius:25px 10px; 左上25px 右上10px 右下25px 左下10px
- 6. http://MobileDev.TW 1-1.圓角邊框 border-radius:25px 10px 3px; CSS3 Basic 6 border-radius:25px 10px 3px 40px; 左上25px 右上10px 右下 3px 左下10px 左上25px 右上10px 右下 3px 左下40px
- 7. http://MobileDev.TW 1-1.圓角邊框 直接指定特定角落 border-bottom-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-topright: 10px; 7 亦可用於圖片 ( Firefox,Chrome, Safari ) CSS3 Basic
- 8. http://MobileDev.TW 1-2.邊框陰影 box-shadow: 10px 10px 5px #888888; 1. 水平距離 2. 垂直距離 3. 模糊程度(數值越大越模糊) 4. 陰影顏色 CSS3 Basic 8
- 15. http://MobileDev.TW 3-1.變形 – 旋轉 transform:rotate(30deg); -webkit-transform:rotate(30deg); /* Safari and Chrome */ -ms-transform:rotate(30deg); /* IE 9*/ 控制旋轉的度數 CSS3 Basic 15
- 16. http://MobileDev.TW 3-1.變形 – 旋轉 3-1a.Lab 請讓車子的輪胎轉動 CSS3 Basic 16
- 17. http://MobileDev.TW 3-2.變形 – 縮放 transform:scale(2,4); -webkit-transform:scale(2,4); /* Safari and Chrome */ -ms-transform:scale(2,4); /* IE 9 */ 水平, 垂直 可小於1 CSS3 Basic 17
- 18. http://MobileDev.TW 3-3.變形 – 歪斜 transform:skew(30deg,20deg); -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ -ms-transform:skew(30deg,20deg); /* IE 9 */ 水平, 垂直 CSS3 Basic 18
- 19. http://MobileDev.TW 3-4.變形 – 漸長 transition:width 2s; -webkit-transition:width 2s; /*Safari and Chrome*/ -ms-transition:width 2s; /*IE 9*/ 寬度/高度 延遲秒數 CSS3 Basic 19
- 20. http://MobileDev.TW 3-4.變形 – 漸長 3-4a.Lab 結合觸控事件與判斷，讓兩個長方條相遇 CSS3 Basic 20
- 22. http://MobileDev.TW 4-1.文字陰影 text-shadow: 5px 10px 2px #000; 1. 陰影向右偏移5px 2. 陰影向下偏移10px 3. 陰影擴散為2px (越大陰影越模糊) 4. 陰影為黑色 22CSS3 Basic
- 25. http://MobileDev.TW -webkit-mask-box-image: url(mask.png) 50 50 50 50 stretch stretch; 1.遮罩圖片 2~5.上、右、下、左距離 6,7.水平樣式(stretch/round)、垂直樣式 25 5-1.圖片箱形遮罩 CSS3 Basic
- 26. http://MobileDev.TW -webkit-mask-box-image: url(stamp.svg) 30 30 30 30 round round; 1.遮罩圖片 2~5.上、右、下、左距離 6,7.水平樣式(stretch/round)、垂直樣式 26 5-1.圖片箱形遮罩 CSS3 Basic
- 27. http://MobileDev.TW27 5-2.圖片遮罩 -webkit-mask-image: url(circle.svg) CSS3 Basic
- 30. http://MobileDev.TW 6.動畫 • -webkit-keyframes 定義動畫影格 • 名稱 • 可設定from、to或x% • -webkit-animation 定義動畫屬性 • name：名稱，與keyframes對應 • duration：動畫播放時間長度(秒) • iteration-count：播放次數( n or infinite) • timing-function：ease、linear、ease-in、ease -out、ease-in-out CSS3 Basic 30