CSS3知識點

一、CSS3新特性及核心知識
- （一）新增選擇器
- （二）新增的使用者界面屬性
- （三）常用的樣式屬性邊框和盒陰影
- （四）CSS3背景新特性及精靈圖檔的使用
- （五）詳細講解CSS3漸變背景
- （六）CSS3文本效果及特殊字型引入
- （七）CSS3的多列布局
- （八）裝置相容必備知識多媒體查詢
二、CSS3特效
- （一）2D轉換動畫效果
- （二）3D轉換動态效果
- （三）CSS3過渡實用技巧
- （四）CSS3動畫特效技能

一、CSS3新特性及核心知識

（一）新增選擇器

。。。。有點多

（二）新增的使用者界面屬性

resize屬性規定是否可以調整元素尺寸

none 預設值⽆無法調整元素的尺寸
both 可調整元素的⾼度和寬度
horizontal 可調整元素的寬度
vertical 可調整元素的高度

box-sizing屬性改變盒子模型的組成方式，以下是該屬性的三個值：

content-box 預設值 padding和border不計入width和height内
border-box padding和border計⼊width和height内
inherit 繼承父元素的box-sizing屬性的值

outline-oﬀset屬性設定輪廓架構在border邊緣外的偏移 outline與border有兩點不同：

outline不占用空間 outline可能是非矩形

（三）常用的樣式屬性邊框和盒陰影

CSS3圓⻆角屬性border-radius：被用于建立圓角

border-radius屬性每個半徑四個值的順序分别是左上角，右上角，右下角，左下角

可傳的值如下：

length：定義圓形半徑或橢圓的半長軸，半短軸。負值無效。
percentage：使用百分數定義圓形半徑或橢圓的半長軸，半短軸。水準半軸相對于盒模型的寬度；垂直半軸相對于盒模型的高度。負值⽆無效。
/斜杆分隔寫法，斜杆左邊的值為水準半軸，右邊值垂直半軸

CSS3盒陰影屬性box-shadow：被用來添加陰影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需的。水準陰影的位置。允許負值
v-shadow：必需的。垂直陰影的位置。允許負值
blur：可選。模糊距離
spread：可選。陰影的⼤⼩
color：可選。陰影的顔色。
inset：可選。陰影向内擴散

CSS3圖檔邊框屬性border-image：指定⼀個圖檔作為邊框

例題：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .radius {
            width: 300px;
            height: 500px;
            background: #ff0000;
            border-radius: 20px 10px;
        }
        .shadow {
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            box-shadow: 5px 5px 5px 5px red inset;
        }
        .borderImg {
            width: 300px;
            height: 200px;
            border: 15px solid transparent;
            border-image: url('border.png') 27 / 20px / 10px repeat;//路徑 切割圖檔 圖檔寬度 邊框向外偏移 重複（strech round）
        }
    </style>
</head>
<body>
    <!-- <div class="radius"></div> -->
    <!-- <div class="shadow"></div> -->
    <div class="borderImg">css3圖檔邊框borderImg</div>
</body>
</html>

（四）CSS3背景新特性及精靈圖檔的使用

background-image：添加背景圖檔

可添加多個背景，每張圖檔用，逗号隔開，前面的圖檔會繪制在後面的圖檔上

background-size：設定背景圖檔的大小，可傳的值如下：

< length> 值，指定背景圖檔大小，不能為負值。
< percentage> 值，指定背景圖檔相對背景區（background positioning area）的百分比。
< auto> 值，以背景圖檔的比例縮放背景圖檔。
< cover> 值，縮放背景圖檔以完全覆寫背景區。
< contain> 值，按原有寬高⽐例縮放背景圖檔以完全裝入背景區。

background-origin：指定背景圖檔的位置，可傳的值如下

border-box：背景圖檔的擺放以border區域為參考

padding-box：預設值背景圖檔的擺放以padding區域為參考

content-box：背景圖檔的擺放以content區域為參考

注意：當使用為ﬁxed時，該屬性将被忽略不起作用。

background-clip：指定從哪個位置開始繪制，可傳的值如下

border-box：預設值，背景延伸至邊框外沿（但是在邊框下層）。 padding-box：背景延伸至内邊距（padding）外沿。不會繪制到邊框處。 content-box：背景被裁剪至内容區（content box）外沿。

例題：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
   .backgroundImg {
     width: 300px;
     height: 200px;
     padding: 10px;
     border: 10px solid transparent;
     background-image: url('border.png');
     background-repeat: no-repeat;
     background-size:cover;
     background-origin: content-box;
   }
   .backgroundImg2 {
    width: 300px;
     height: 200px;
     padding: 10px;
     border: 10px solid transparent;
     background-image: url('border.png');
     /* background-clip: text; */
     margin: 10px;
   }
   .sprite {
     width: 27px;
     height: 27px;
     background-image: url('border.png');
     background-repeat: no-repeat;
     background-position: -27px 0;
   }
  </style>
</head>
<body>
   <!-- <div class="backgroundImg"></div> -->
   <!-- <div class="backgroundImg2">css3背景新特性</div> -->
   <div class="sprite"></div>
</body>
</html>

（五）詳細講解CSS3漸變背景

1.線性漸變（linear-gradient）

标準文法：background: linear-gradient(direction, color-stop1, color-stop2, …);

direction:漸變的方向，預設情況是從上到下

标準文法方向是漸變的末尾位置，其他浏覽器字首文法是漸變的起始位置

注意：标準文法要放在其他浏覽器文法後面

角度漸變：标準文法0度指向北，其他浏覽器字首文法指向東

換算公式：90-标準文法角度=其他浏覽器字首文法⻆度

CSS3知識點整理一、CSS3新特性及核心知識二、CSS3特效

重複的線性漸變：repeating-linear-gradient()

2.徑向漸變（radial-gradient）

background: radial-gradient(shape size at position, start-color, …, last-color);

CSS3知識點整理一、CSS3新特性及核心知識二、CSS3特效

重複徑向漸變：repeating-radial-gradient()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .linearGradient {
      width: 300px;
      height: 200px;
      /* background: -webkit-linear-gradient(90deg,red 10%,blue 50%,yellow); */
      /* background: linear-gradient(0deg,red 10%,blue 50%,yellow); */
      background: repeating-linear-gradient(45deg,yellow,red 10%,blue 20%)
    }
    .radialGradient {
      width: 300px;
      height: 200px;
      /* background: radial-gradient(circle farthest-side at bottom,red,blue,yellow) */
      background: repeating-radial-gradient(red,yellow 10%,blue 20%)
    }
  </style>
</head>
<body>
  <!-- <div class="linearGradient"></div> -->
  <div class="radialGradient"></div>
</body>
</html>

（六）CSS3文本效果及特殊字型引入

text-shadow：給文本添加陰影效果

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。⽔平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊的距離。
color	可選。陰影的顔色。

text-overﬂow：指定當⽂本溢出包含它的元素的形式

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	顯示省略符号來代表被修剪的文本。
string	使⽤給定的字元串來代表被修剪的⽂本。(隻在ﬁrefox浏覽器器有效)

word-wrap：屬性允許内容在過長情況下可以自動換行。

word-wrap: normal|break-word;

值	描述
normal	隻在允許的斷字點換行（浏覽器保持預設處理）。
break-word	在長單詞或 URL 位址内部進行換⾏。

word-break：指定内容的斷行規則。

word-break: normal|break-all|keep-all;

值	描述
normal	使⽤浏覽器預設的換行規則。
break-all	允許在單詞内換⾏。
keep-all	隻能在半⻆空格或連字元處換⾏。

@font-face 規則：定義⾃己的文本字型

首先定義字型的名稱（比如 myFirstFont），然後指向該字型檔案。

提示：URL請使用小寫字母的字型，大寫字母在IE中會産生意外的結果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    @font-face {
      font-family: myFont;
      src: url('Dexsar.otf'),
      url('Dexsar.ttf')
    }
    .textShadow {
      text-shadow: 2px 2px 2px red;
    }
    .textOverflow {
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: '等';
    }
    .wordWrap {
      width: 160px;
      /* word-wrap: break-word; */
      /* word-break: break-all; */
      word-break: keep-all;
      font-family: myFont
    }
  </style>
</head>
<body>
  <!-- <div class="textShadow">
    css3文本陰影
  </div> -->
  <!-- <div class="textOverflow">
    css3文本溢出kldjfkldjkfl
  </div> -->
  <div class="wordWrap">
    thisislong哈哈worddddddddddddddddd
  </div>
</body>
</html>

（七）CSS3的多列布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .colCount {
      width: 400px;
      /* -webkit-column-count: 3;
      -moz-column-count: 3;
      column-count: 3; //指定分割的列數*/
      column-gap: 40px;//指定列與列的間隙
      /* column-rule-style: solid;//列與列的邊框樣式
      column-rule-width: 10px;//邊框厚度
      column-rule-color: red; */
      column-rule: 10px solid red;//以上三個的縮寫
      column-width: 100px;//列的寬度
    }
  </style>
</head>
<body>
  <div class="colCount">
      “知道我和唐僧什麼差別嗎 唐僧取經我娶你” “莫文蔚的陰天，孫燕姿的雨天，周傑倫的晴天，都不如你和我聊天。”
      “你知道你和星星的差別嗎？星星點亮了黑夜，而你點亮了我的心”
  </div>
</body>
</html>

（八）裝置相容必備知識多媒體查詢

使用多媒體查詢可以在指定的裝置上使用對應的樣式替代原有的樣式。

//⼤于480px
@media screen and (min-width: 480px) { 
	body {
		background-color: red;
	}
}
//大于960px小于1200px
@media screen and (min-width:960px) and (max-width:1200px){ 
	body{
		background:yellow;
	}
}

二、CSS3特效

（一）2D轉換動畫效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .transform {
      width: 300px;
      height: 200px;
      background: red;
      margin: 50px;
      /* transform: translate(100px,200px);// x軸y軸上的平移*/
      /* transform: translateX(100px);
      transform: translateY(200px); */

      /* transform: rotate(-30deg);  //旋轉 正順時針 負逆時針*/

      /* transform: scale(2,2); //縮放根據中心圓點 */

      transform: skew(-30deg,20deg)//傾斜 x軸y軸傾斜的角度
    }
  </style>
</head>
<body>
    <div class="transform"></div>
</body>
</html>

（二）3D轉換動态效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      transform-style: preserve-3d
    }
    .tf{
      width: 100px;
      height: 100px;
      background: red;
      transform:translate3d(50px,50px,100px); //x,y,z,z為面向螢幕方向
    }
    .tf2 {
      width: 100px;
      height: 100px;
      background: yellow;
      transform: translate3d(0,0,50px);
    }
    .rotate {
      width: 100px;
      height: 100px;
      background: red;
      transition: all 2s;
    }
    .rotate:hover {
      /* transform: rotateX(180deg); //沿着X軸3D旋轉*/
      transform: rotateY(180deg);//沿着Y軸3D旋轉
    }
  </style>
</head>
<body>
  <!-- <div class="tf"></div>
  <div class="tf2"></div> -->
  <div class="rotate">hellow</div>
</body>
</html>

（三）CSS3過渡實用技巧

CSS3 過渡是元素從一種樣式逐漸改變為另⼀種的效果。

transition: property duration timing-function delay;

值	描述
transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉速曲線
transition-delay	定義transition效果開始的時候

transition-property屬性

值	描述
none	沒有屬性會獲得過渡效果。
all	所有屬性都将獲得過渡效果。
property	定義應⽤過渡效果的 CSS 屬性名稱列表，列表以逗号分隔。

transition-timing-function屬性

值	描述
linear	規定以相同速度開始⾄至結束的過渡效果。
ease	預設值。規定慢速開始，然後變快，然後慢速結束的過渡效果。
ease-in	規定以慢速開始的過渡效果。
ease-out	規定以慢速結束的過渡效果。
ease-in-out	規定以慢速開始和結束的過渡效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .test {
      width: 100px;
      height: 100px;
      background: red;
      margin: 20px;
    }
    .test:hover {
      width: 200px;
      height: 200px;
    }
    .test1 {
      transition: all 2s ease 2s;
    }
    .test2 {
      transition: all 2s linear;
    }
    .test3 {
      transition: all 2s ease-in;
    }
    .test4 {
      transition: all 2s ease-out;
    }
    .test5 {
      transition: all 2s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="test test1">css3過渡</div>
  <div class="test test2">css3過渡</div>
  <div class="test test3">css3過渡</div>
  <div class="test test4">css3過渡</div>
  <div class="test test5">css3過渡</div>
</body>
</html>

（四）CSS3動畫特效技能

CSS3 @keyframes規則

@keyframes規則内指定⼀個CSS樣式和動畫将逐漸從目前的樣式更改為新的樣式。

文法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	說明
animation-name	指定動畫的名稱
animation- duration	動畫需要多少秒或毫秒完成
animation- timing-function	設定動畫将如何完成⼀個周期
animation-delay	設定動畫在啟動前的延遲間隔。
animation- iteration-count	定義動畫的播放次數。
animation- direction	指定是否應該輪流反向播放動畫。
animation-ﬁll- mode	規定當動畫不播放時（當動畫完成時，或當動畫有⼀個延遲未開始播放時），要應⽤到元素的樣式。
animation-play- state	指定動畫是否正在運行或已暫停。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .test {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      border-radius: 50%;
      animation: myAnimation 5s linear 2s both;
    }

    .test:hover {
      animation-play-state: paused;
    }

    @keyframes myAnimation {
      from {background:yellow;left: 50px;}
      to {left:100px;}
    }
  </style>
</head>
<body>
  <div class="test">css3動畫</div>
</body>
</html>

CSS3知識點整理一、CSS3新特性及核心知識二、CSS3特效

CSS3知識點

一、CSS3新特性及核心知識

（一）新增選擇器

（二）新增的使用者界面屬性

（三）常用的樣式屬性邊框和盒陰影

（四）CSS3背景新特性及精靈圖檔的使用

（五）詳細講解CSS3漸變背景

（六）CSS3文本效果及特殊字型引入

（七）CSS3的多列布局

（八）裝置相容必備知識多媒體查詢

二、CSS3特效

（一）2D轉換動畫效果

（二）3D轉換動态效果

（三）CSS3過渡實用技巧

（四）CSS3動畫特效技能

繼續閱讀

關于:first-child的誤區

flex彈性布局中的flex：1的了解

flex彈性盒模型及flex-grow與flex-shrink的計算

Flex布局及屬性

深入CSS vertical-align屬性

給背景圖檔添加超連結

去除div的滾動條但是依然可以滾動的方法

modern-normalize vs normalize.css

彈性web UI的核心：媒體查詢

CSS3 ---奔跑的小人

【CSS3】設定超連結樣式超連結樣式

分享幾個常用的css網站前言一、CSS 參考網站二、CSS 參考網站三、CSS集合，自由調節動畫參數，生成代碼片段：五、通過做飯，練習 CSS 選擇器六、送小青蛙回家，學習 flex 布局總結

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

談談css的僞類和僞元素

十大酷炫屌的圖像懸停特效

vue3 transitionvue3 transition元件和vue2 transition元件