CSS3

文章目錄

CSS3
前言
一、開發商前綴
二、靜態樣式
- 2.1 Web字體
- 2.2 背景background
- - - 2.2.1 支持多背景
    - 2.2.2 各背景位置
    - 2.2.3 各背景的平鋪方式
- 2.3 漸變
- - - 2.3.1 線性漸變 linear-gradient（）
    - 2.3.2 徑向漸變 radial-gradient（）
    - 2.3.3 回圈漸變 repeating-radial-gradient（）/ repeating-linear-gradient（）
- 2.4 圓角border-radius
- - - 2.4.1 border-radius：每個角內切圓半徑
    - 2.4.2 border【-top / bottom】【- left / right】-radius：針對某一個角
- 2.5 陰影shadow
- - - 2.5.1 text-shadow：文字陰影
    - 2.5.2 box-shadow：盒子陰影
- 2.6 透明度opacity
- - - 2.6.1 方式1：rgba（）
    - 2.6.2 方式2：opacity
    - 2.6.3 區別
三、動態樣式
- 3.1 transition過渡
- - - 3.1.1 transition-property: 規定設定過渡效果的css屬性的名稱
    - 3.1.2 transition-duration: 規定完成過渡效果需要多少時間
    - 3.1.3 transition-delay: 規定過渡效果的延遲時間
    - 3.1.4 transition-timing-function:規定速度效果的速度曲線
    - 3.1.5 復合樣式
    - 3.1.6 常常與transition有聯系的樣式
    - 3.1.7 觸發方式
- 3.2 transform變換
- - - 3.2.1 translate：位移
    - 3.2.2 scale：縮放
    - 3.2.3 rotate：旋轉
    - 3.2.4 skew：斜切
    - 3.2.5 transform-origin：基點的位置（變形的基準位置）
    - 3.2.6 變形操作只能添加給塊元素，但是不能添加給行內元素
    - 3.2.7 復合寫法
    - 3.2.8 執行順序（后寫的先執行）
- 3.3 animation影片
- - - 3.3.1 animation-name
    - 3.3.2 animation-duration
    - 3.3.3 animation-delay
    - 3.3.4 animation-iteration-count
    - 3.3.5 animation-timing-function
    - 3.3.6 animation-fill-mode
    - 3.3.7 animation-direction
    - 3.3.8 復合寫法
    - 3.3.9 keyframes定義影片程序
    - 3.3.10 引入animate.css的樣式開發
四、布局
- 4.1分欄布局
- - - 4.1.1 column-count
    - 4.1.2 column-width
    - 4.1.3 column-gap
    - 4.1.4 column-rule
    - 4.1.5 column-span
    - 4.1.6 em才是首選單位
- 4.2 移動端之百分比布局/流式布局
- - - 4.2.1 應用場景：應對視窗大小縮放的方案
    - 4.2.2 特點：高度固定,寬度自適應（百分比）
    - 4.2.3 設計細節
    - 4.2.4 流式圖片
    - 4.2.5 流式排版
- 4.2 回應式布局
- - - 4.2.1 同一套頁面可以兼容不同解析度的設備
    - 4.2.2 設計原則
    - 4.2.3 媒體查詢
    - 4.2.5 防止樣式非意外疊加（邊界值問題）
    - 4.2.6 替換整個樣式表
    - 4.2.7 識別特定的設備
總結

前言

一、開發商前綴

前綴	開發商
-moz-	FireFox
-webkit-	Chrome、Safari、Opera （三個瀏覽器內核都是webkit）
-ms-	IE
-o-	Opera舊版15之前

二、靜態樣式

2.1 Web字體

Google Fonts
http://www.googlefonts.cn/
```
 link標簽引入
 font-family設定
```

2.2 背景background

2.2.1 支持多背景

  background-image：url（“ ”），url（“ ”）...

2.2.2 各背景位置

  background-position：position-1.position-2....

2.2.3 各背景的平鋪方式

  background-repeat：repeat-1，repeat-2.....

.decoratedBox{
	margin:50px;
	padding:20px
	background-image：url（“top-left.png”），url（“right-bottom.png”）;
	background-position：left top,right bottom;
	background-repeat：no-repeat,no-repeat;
}

2.3 漸變

2.3.1 線性漸變 linear-gradient（）

語法

 background-image: linear-gradient（to direction/angle ，color1  【percentage1】，color2  【percentage2】….）
 	 direction：八個方向，默認起點在top
 	 angle：底線為0deg
 	 percentage：起點

2.3.2 徑向漸變 radial-gradient（）

語法

 background-image: radial-gradient(【shape size at position】, start-color, ..., last-color);

引數

 shape：圓的型別
 		ellipse (默認): 指定橢圓形的徑向漸變，
 		circle ：指定圓形的徑向漸變

 size：定義漸變的大小
 		farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
 		closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
 		closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
 		farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

 position：定義漸變的位置，
 	（1）位置名詞
 		center（默認）：設定中間為徑向漸變圓心的縱坐標值，
 		top：設定頂部為徑向漸變圓心的縱坐標值，
 		bottom：設定底部為徑向漸變圓心的縱坐標值，
 	（2）自定義位置
 		percentage1 percentage2
 			percentage1：距離左邊的距離
 			percentage2：距離頂部的距離

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>線性漸變與徑向漸變</title>
    <style>
        .box1{width: 100px;height: 100px;background-image: linear-gradient(to left,red,blue);float:left}
        .box2{width: 100px;height: 100px;background-image: linear-gradient(red,blue);float:left}
        .box3{width: 100px;height: 100px;background-image: linear-gradient( to right bottom,red,blue);float:left}
        .box4{width: 100px;height: 100px;background-image: linear-gradient(60deg,red,blue);float:left}
        .box5{width: 100px;height: 100px;background-image: linear-gradient(red 40% ,blue 70%);float:left}
        .box6{width: 100px;height: 100px;background-image: radial-gradient(circle,red 30%,yellow 50%,blue 80%);float:left}
        .box7{width: 100px;height: 100px;background-image: radial-gradient(circle,white,blue);float:left}
    </style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
	<div class="box6"></div>
	<div class="box7"></div>
</body>
</html>

在這里插入圖片描述

2.3.3 回圈漸變 repeating-radial-gradient（）/ repeating-linear-gradient（）

	最重要的是限制漸變的大小（用起點），以使其可以回圈
	background-image: repeating-linear-gradient（to direction/angle ，color1  【percentage1】，color2  【percentage2】….）
	background-image: repeating-radial-gradient(【shape size at position】, start-color, ..., last-color);

   .box7{width: 100px;height: 100px;background-image: repeating-radial-gradient(circle,yellow,green 10%);float:left}

在這里插入圖片描述

2.4 圓角border-radius

2.4.1 border-radius：每個角內切圓半徑

語法

 	兩個值：左上右下  右上左下
    四個值：左上 右上 右下 左下

圓（容器寬和高相同）
```
 	border-radius：50%
```
橢圓（容器寬是高的兩倍）
```
 	border-radius：width / height
```
上半圓（容器寬是高的兩倍）
```
 	border-radius ：height height 0 0 
```
側半圓（容器高是寬的兩倍）
```
 	border-radius ：width 0 0 width
```

2.4.2 border【-top / bottom】【- left / right】-radius：針對某一個角

語法

 	適合用來表示不規則圖形
    兩個值：水平半徑 垂直半徑
    一個值：水平半徑和垂直半徑為指定值

2.5 陰影shadow

2.5.1 text-shadow：文字陰影

語法

 text-shadow（x，y，blur，color，x2，y2，blur，color2...）
 	 x：向右移動x個單位
     y：向下移動y個單位
     blur：模糊度，單位px，值越大就越模糊
     color：不寫陰影顏色默認和字體顏色相同，可以改其值

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>文字陰影</title>
	    <style>
	        .div1{font-size: 20px;color: blue;text-shadow: 5px 5px 5px red,-5px -5px 5px green}
	    </style>
	</head>
	<body>
	    <div class="div1">hello css3</div>
	
	</body>
	</html>

在這里插入圖片描述

2.5.2 box-shadow：盒子陰影

語法

 box-shadow（x y blur spread color 【inset】，x2 y2 blur2 spread2 color2 【inset】）
      x：陰影向右移動x個單位
      y：陰影向下移動y個單位
      blur：模糊度，值越大越模糊，單位px
      spread：增大模糊邊界之前實心顏色面積，值越大，面積越大
      color
      inset：內陰影，不寫默認外陰影，寫了outset無效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-shadow</title>
    <style>
        .div1{width: 100px;height: 100px;background-color: red;box-shadow: 10px 10px 10px 5px black }
    </style>
</head>
<body>
<div class="div1"></div>

</body>
</html>

在這里插入圖片描述

2.6 透明度opacity

2.6.1 方式1：rgba（）

	 rgba（0~255，0~255，0~255，0~1）

2.6.2 方式2：opacity

IE：filter:alpha(opacity=“value”)
```
 	0~100
```

現代瀏覽器：opacity

    0（透明）~ 0.5（半透明）~ 1（不透明）

2.6.3 區別

	方式1：可以讓指定的樣式透明，而不影響其他樣式	
	方式2：占空間，且所有的子內容都會透明

三、動態樣式

3.1 transition過渡

3.1.1 transition-property: 規定設定過渡效果的css屬性的名稱

      如果要全部屬性則用all

3.1.2 transition-duration: 規定完成過渡效果需要多少時間

      單位：秒/毫秒

3.1.3 transition-delay: 規定過渡效果的延遲時間

	  單位：秒/毫秒
	  延遲則數值為正數，提前則負數
	  如果是提前的話，當要開始的時候直接變為當前秒數的樣式，沒有延遲，就是說，如果提前兩秒的話，那么當過渡開始的時候直接變為兩秒的時候應該有的樣式，

3.1.4 transition-timing-function:規定速度效果的速度曲線

      linear：勻速
      ease：  默認值，速度逐漸慢下來
      ease-in：加速
      ease-out：減速
      cubic-bezier：先加速后減速

		   <head>
			<meta charset="UTF-8">
			<title>過渡</title>
			<style>
				div{
				    width:100px;
				    height:100px;
				    background-color:red;
					transition-property:all;
					transition-duration:3s;
					transition-delay:-1s;
					transition-timing-function:ease-in;
					//復合寫法： transition:all 3s -1s ease-in;
				}
			   div:hover{width:200px;height:200px;background-color:blue}
			</style>
			</head>
			<body>
				<div></div>
			</body>

3.1.5 復合樣式

     transition：屬性  完成時間 延遲時間  速度曲線
     屬性和曲線不寫就默認all 和linear
     transition屬性不能添加在hover偽類上

3.1.6 常常與transition有聯系的樣式

	opacity透明度
	shadow陰影
	漸變
	transform變形

3.1.7 觸發方式

  	1、hover/focus偽類定義新的樣式，移入移出或聚焦造成過渡的影片效果      
    2、js操控該物件的樣式

3.2 transform變換

在這里插入圖片描述

3.2.1 translate：位移

語法（單位：px）

  translate（valuex，valuey）   	x，y方向都有位移
  translate（value）			 	默認一個值是x方向的位移
  translateX（x）			  	 	x方向的位移
  translateY（y）			  	 	y方向的位移
  translateZ（z）			   		正值向前，負值向后

3.2.2 scale：縮放

語法（單位：比例值）

  scale（value） 		寫一個值就是寬高都縮放		
  scaleX（x） 			在x軸縮放x倍，-1的話會左右相反（鏡像翻轉）
  scaleY（y）			在y軸縮放y倍	-1的話會倒放
  scaleZ（z） 			在z軸縮放z倍（立體元素的厚度）

3.2.3 rotate：旋轉

語法（單位：角度deg）

 rotate（value deg）		 和rotateZ是相同效果，
 rotateX（x deg）			 正值則沿著x軸向上翻轉，負值則沿著x軸向左翻轉
 rotateY（y deg）			 正值則沿著y軸向右翻轉，負值則沿著y軸向左翻轉
 rotateZ（z deg）			 正值則沿著z軸按順時針旋轉，負值則沿著z軸按逆時針旋轉

3.2.4 skew：斜切

語法（單位：角度deg）

 skew（value deg）     	與skewX效果相同 
 skew（x deg，y deg）	 	skewX與skewY效果都有
 skewX（x deg）			水平方向保持不變，垂直方向正值向左傾斜，負值向右傾斜
 skewY（y deg）			垂直方向保持不變，水平方向正值向下傾斜，負值向上傾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位移與縮放</title>
    <style>
        .box1{width: 100px;height: 100px;background-color: red;transform: skewX(30deg);float: left;margin: 60px;}
        .box2{width: 100px;height: 100px;background-color: red;transform: skewY(30deg);float: left;margin: 50px;}
        .box3{width: 100px;height: 100px;background-color: red;float: left;margin: 50px;} 
        .box4{width: 100px;height: 100px;background-color: red;float: left;transform: translate(100px) skew(45deg)}
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>

在這里插入圖片描述

3.2.5 transform-origin：基點的位置（變形的基準位置）

語法

    transform-origin：x y 【z（3d的時候才需要設定z）】

3.2.6 變形操作只能添加給塊元素，但是不能添加給行內元素

		行內元素設定width和height無效，變形操作的底層操作物件都是寬高

3.2.7 復合寫法

        復合寫法：可以同時添加多個變形操作
        例：transform: translate(100px) skew(45deg) scale（2） rotate（90deg）

3.2.8 執行順序（后寫的先執行）

		先寫的translate不會受到后面的變形操作的影響
		后寫的translate（）會受到先寫的rotate、scale、skew的影響
             translate（）會位移（位移*縮放）的長度
             translate（）會在rotate的角度的方向位移相應的長度，再進行旋轉
             translate（）會在skew的角度的方向位移相應的長度，再進行斜切

3.3 animation影片

3.3.1 animation-name

	設定影片的名字（自定義的名字）

3.3.2 animation-duration

	影片的持續時間

3.3.3 animation-delay

	影片的延遲時間

3.3.4 animation-iteration-count

	影片的重復次數，默認值就是1，單位是數值，infinite無限次數

3.3.5 animation-timing-function

	影片的運動方式
      linear：勻速
      ease：  默認值，速度逐漸慢下來
      ease-in：加速
      ease-out：減速
      cubic-bezier：先加速后減速

3.3.6 animation-fill-mode

	規定影片播放的之前或之后，其影片效果是否可見
	   none（默認值）：在運動結束之后回到初始位置，在延遲的情況下，讓0%在延遲后生效
       backwards：在延遲的情況下，讓0%在延遲前生效
       forwards：在運動結束的之后，停在結束位置
       both：backwards和forwards同時生效
       注：
          運動結束后，默認停留在初始位置上

3.3.7 animation-direction

	屬性定義是否應該輪流反向播放影片
	   alternate：一次正向（0%~100%），一次反向（100%~0%）
       reverse：永遠都是反向，從100%~0%
       normal（默認值）：永遠都是正向，從0%~100%

3.3.8 復合寫法

      animation：name duration delay count function mode direction

3.3.9 keyframes定義影片程序

      animation定義在元素內，影片程序要寫在@keyframes內

3.3.10 引入animate.css的樣式開發

	  工具animate.css，引入各種影片樣式
      查看樣式效果訪問https://animate.style/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation影片</title>
    <style>
        .div1{width: 300px;height: 300px;border: black 1px solid;margin:  0 auto}
        .div2{width: 100px;height: 100px;background-color: red;
            animation:myBox 10s 0s 1 linear }
        @keyframes myBox {
            0%{transform: translate(0,0) rotate(45deg) }
            25%{transform: translate(300px,0)}
            50%{transform: translate(300px,300px) rotate(90deg) }
            75%{transform: translate(0,300px)}
            100%{transform: translate(0,0) scale(0.5) }
        }

        .div3{width: 100px;height: 100px;background-color: red;animation: mybox 1s 0s infinite;
         animation-fill-mode: forwards;animation-direction: alternate;
        }

        @keyframes mybox {
            0%{transform: translate(0,0)}
            100%{transform: translate(100px,0)}
        }

    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <div class="div3"></div>
    
</body>
</html>

四、布局

4.1分欄布局

4.1.1 column-count

	分欄的個數

4.1.2 column-width

	分欄的寬度

4.1.3 column-gap

	分欄的間距

4.1.4 column-rule

	分欄的邊線
	和邊框語法一樣

4.1.5 column-span

	合并分欄的個數
	全部則為all

4.1.6 em才是首選單位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>column布局</title>
    <style>
        .box1{width: 800px;height: 400px;border: 1px black solid;margin: 30px auto;
            column-count: 4; 
            column-width: 100px;
            column-rule: 1px gray solid;
            column-gap: 20px;
        }
        .box1 h2{column-span: all;text-align: center} 
    </style>
</head>
<body>
    <div class="box1">
        <h2>CSDN</h2>
        <p>中國專業IT社區CSDN (Chinese Software Developer Network) 創立于1999年，致力于為中國軟體開發者提供知識傳播、在線學習、職業發展等全生命周期服務，</p>
        <p>旗下擁有：專業的中文IT技術社區： CSDN.NET；移動端開發者專屬APP： CSDN APP、CSDN學院APP；新媒體矩陣微信公眾號：CSDN資訊、程式人生、GitChat、CSDN學院、AI科技大本營、區塊鏈大本營、CSDN云計算、GitChat精品課、人工智能頭條、CSDN企業招聘.. </p>
        <p>涵蓋CSDN資訊、AI科技大本營、區塊鏈大本營、GitChat、GitChat精品課、程式人生、人工智能頭條、Python大本營、CSDN學院等，覆寫各個專業技術領域，為IT開發者和從業人員提供資訊、學習、交流、互動和分享平臺，</p>
        <p>CSDN學院是CSDN旗下的在線學習平臺，集合了各領域資深技術專家，為廣大學員提供優質的在線課程及技術直 播，同時利用互聯網優勢，精心推出了人工智能、區塊鏈、Python全堆疊、Web全堆疊、大資料等實訓班，幫助學員系 統提升專業技能，</p>
    </div>

</body>
</html>

在這里插入圖片描述

4.2 移動端之百分比布局/流式布局

4.2.1 應用場景：應對視窗大小縮放的方案

4.2.2 特點：高度固定,寬度自適應（百分比）

4.2.3 設計細節

	對于大的輪播圖等,寬度100%自適應
	對于小圖示或者文本,一般都是固定寬高大小
	對于大螢屏來說,有些布局元素會顯得很長，這時候需要將外邊距固定
	先寫固定布局，再創建流式布局

4.2.4 流式圖片

  寬度限定為容器的最大寬度，max-width：100%
  如果要有外邊距：則樣式應該是
  		box-sizing：border-box
  		margin：單位百分比

4.2.5 流式排版

 	把所有px數值都轉為em單位

<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>hangge.com</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
 
        .leftColumn {
            width: 33.3%;
            float: left;
            background-color:yellow;
            height:300px;
        }
 
        .rightColumn {
            width: 66.7%;
            float: left;
            background-color:#7FFF9B;
            height:300px;
        }
        .container{
            width:90%;
            height:300px;
            margin:0 5%;
        }
    </style>
</head>
<body>
    <div class = "container">
        <div class="leftColumn">left</div>
        <div class="rightColumn">right</div>
    </div> 
</body>
</html>

百分比布局

4.2 回應式布局

4.2.1 同一套頁面可以兼容不同解析度的設備

4.2.2 設計原則

	頁面元素寬度不用px作為單位，而是盡量使用百分比，
	頁面框架之間使用流式布局，也就是用float屬性，這樣當元素超出螢屏寬度的時候會滑倒下面而不是撐出水平滾動條，
	注意圖片的大小，尤其是寬度，同樣盡量使用百分比
	先做好PC端的樣式，然后使用css中的@media媒體查詢來適配不同的終端，將頁面柵格化

4.2.3 媒體查詢

媒介型別

  all：用于所有設備
  print：用于列印機和列印瀏覽
  screen：用于電腦螢屏
  speech：應用于螢屏閱讀器等發生設備

媒體特性

 and：和
 not：非
 min-width：最小寬度，用于給桌面瀏覽器調整視窗
 max-width：最大寬度，用于給桌面瀏覽器調整視窗，常用
 min-device-width：設備最小寬度，適應不同移動瀏覽器視口大小
 max-device-width：設備最大寬度，適應不同移動瀏覽器視口大小，常用
 orientation：豎屏還是橫屏，常用
	    portrait 豎屏
 	landscape：橫屏
 <link>：link標簽滿足某條件才生效

4.2.5 防止樣式非意外疊加（邊界值問題）

	@media (not max-width:600px) and (max-width:700px)
	//在（600，700】px之間(方法1)
	
	@media (max-width:600px) and (max-width:699.99px)
	//在600~699.99px之間(方法2)

4.2.6 替換整個樣式表

	當樣式修改不多時僅僅用@media執行即可
	修改樣式較多時需要創建一個新的樣式表便于管理，link標簽中用media屬性查詢

 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

4.2.7 識別特定的設備

像素比（物理像素除以css像素）-webkit-min-device-pixel-ratio

-webkit-min-device-pixel-ratio為1.0：
	1.所有非Retina的Mac
	2.所有非Retina的iOS設備
	3.Acer Iconia A500
	4.Samsung Galaxy Tab 10.1
	5.Samsung Galaxy S

-webkit-min-device-pixel-ratio為1.3：
	1. Google Nexus 7

-webkit-min-device-pixel-ratio為1.5：
	1.Google Nexus S
	2.Samsung Galaxy S II
	3.HTC Desire
	4.HTC Desire HD
	5.HTC Incredible S
	6.HTC Velocity
	7.HTC Sensation

-webkit-min-device-pixel-ratio為2.0：
	1.iPhone 4
	2.iPhone 4S
	3.iPhone 5
	4.iPad (3rd generation)
	5.iPad 4
	6.所有Retina displays 的MAC
	7.Google Galaxy Nexus
	8.Google Nexus 4
	9.Google Nexus 10
	10.Samsung Galaxy S III
	11.Samsung Galaxy Note II
	12.Sony Xperia S
	13.HTC One X

@media screen and ( min-width: 212px){/*213px顯示屏樣式 LG Optimus One*/}
@media screen and ( min-width: 319px){/*320px顯示屏樣式 蘋果4/4S/5C/5S黑莓Z30 */}
@media screen and ( min-width: 359px){/*360px顯示屏樣式 索尼Z1*/}
@media screen and ( min-width: 383px){/*384px顯示屏樣式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/}
@media screen and ( min-width: 399px){/*399px顯示屏樣式 三星galaxyNote*/}
@media screen and ( min-width: 414px){/*414px顯示屏樣式 蘋果6plus*/}
@media screen and ( min-width: 423px){/*424px顯示屏樣式 LG 4X */}
@media screen and ( min-width: 479px){/*480px顯示屏樣式 索尼MT27i Xperia sola*/}
@media screen and ( min-width: 539px){/*640px顯示屏樣式 摩托羅拉Droid3/4/Razr Atrix 4g*/}
@media screen and ( min-width: 639px){/*640px顯示屏樣式*/}
@media screen and ( min-width: 640px){/*640px以上顯示屏樣式*/}

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../project/common-css/common2.css" media=" all and (min-width:500px)">
    <style> 
        #box{width: 100px; height: 100px;background-color: red;}
        @media all and (min-width: 500px){
            #box{background-color: blue;}
        }
        @media  not all and (max-width: 700px){
            #box{background-color: yellow}
        }
        @media (min-width: 200px) and (max-width: 400px) {
            #box{background-color: green}
        }
        @media all and  (orientation:landscape){
            #box{background-color: pink;}    
        }
        @media all and (min-width:768px){
            .mt-md-50{margin-top: 50px;}
        }
        @media all and (min-width:968px){
            .mt-lg-50{margin-top:100px;}
        }
        @media all and (min-width:1200px){
            .mt-xl-50{margin-top: 120px;}
        }
    </style>
</head>
<body>
    <div id="box" class="mt-lg-50"></div>
</body>
</html>

總結

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/219301.html

標籤：其他

上一篇：奇舞周刊第 372 期：Vue 3 的回應式和組合式

下一篇：jsliang 求職系列 - 12 - 手寫防抖和節流

CSS進階之CSS3新特性總結

CSS3

文章目錄

前言

一、開發商前綴

二、靜態樣式

2.1 Web字體

2.2 背景background

2.2.1 支持多背景

2.2.2 各背景位置

2.2.3 各背景的平鋪方式

2.3 漸變

2.3.1 線性漸變 linear-gradient（）

2.3.2 徑向漸變 radial-gradient（）

2.3.3 回圈漸變 repeating-radial-gradient（）/ repeating-linear-gradient（）

2.4 圓角border-radius

2.4.1 border-radius：每個角內切圓半徑

2.4.2 border【-top / bottom】【- left / right】-radius：針對某一個角

2.5 陰影shadow

2.5.1 text-shadow：文字陰影

2.5.2 box-shadow：盒子陰影

2.6 透明度opacity

2.6.1 方式1：rgba（）

2.6.2 方式2：opacity

2.6.3 區別

三、動態樣式

3.1 transition過渡

3.1.1 transition-property: 規定設定過渡效果的css屬性的名稱

3.1.2 transition-duration: 規定完成過渡效果需要多少時間

3.1.3 transition-delay: 規定過渡效果的延遲時間

3.1.4 transition-timing-function:規定速度效果的速度曲線

3.1.5 復合樣式

3.1.6 常常與transition有聯系的樣式

3.1.7 觸發方式

3.2 transform變換

3.2.1 translate：位移

3.2.2 scale：縮放

3.2.3 rotate：旋轉

3.2.4 skew：斜切

3.2.5 transform-origin：基點的位置（變形的基準位置）

3.2.6 變形操作只能添加給塊元素，但是不能添加給行內元素

3.2.7 復合寫法

3.2.8 執行順序（后寫的先執行）

3.3 animation影片

3.3.1 animation-name

3.3.2 animation-duration

3.3.3 animation-delay

3.3.4 animation-iteration-count

3.3.5 animation-timing-function

3.3.6 animation-fill-mode

3.3.7 animation-direction

3.3.8 復合寫法

3.3.9 keyframes定義影片程序

3.3.10 引入animate.css的樣式開發

四、布局

4.1分欄布局

4.1.1 column-count

4.1.2 column-width

4.1.3 column-gap

4.1.4 column-rule

4.1.5 column-span

4.1.6 em才是首選單位

4.2 移動端之百分比布局/流式布局

4.2.1 應用場景：應對視窗大小縮放的方案

4.2.2 特點：高度固定,寬度自適應（百分比）

4.2.3 設計細節

4.2.4 流式圖片

4.2.5 流式排版

4.2 回應式布局

4.2.1 同一套頁面可以兼容不同解析度的設備

4.2.2 設計原則

4.2.3 媒體查詢

4.2.5 防止樣式非意外疊加（邊界值問題）

4.2.6 替換整個樣式表

4.2.7 識別特定的設備

總結