Please enable JavaScript.

Coggle requires JavaScript to display documents.

CSSㄔ (transform變換 (transform: translateX(40px); 在橫軸上移動元素, transform:…

- - - - resize: none;
        textarea 不可調整大小
      - resize: horizontal;
        textarea可水平調整大小
      - resize: vertical;
        textarea可以垂直調整大小。
      - resize: both;
        textarea可以水平和垂直調整大小
    - - font-style: italic;
        使用斜體版的字體：字母稍微傾斜
      - font-style: oblique;
        使用傾斜版本的字體：字母比傾斜更傾斜
      - font-style: normal;
        文字不傾斜
    - - text-transform: capitalize;
        將每個單詞的首字母變成大寫字母
      - text-transform: uppercase;
        將所有字母變成大寫字母
      - text-transform: lowercase;
        將所有字母變成小寫字母
    - - letter-spacing: 2px;
        您可以使用像素值
      - letter-spacing: 0.1em;
        您可以使用em值：這允許間距保持相對於字體大小
    - - text-align: center;
        文字內容居中
      - text-align: right;
        文本內容與右側對齊
    - - text-overflow: clip;
        文本內容被裁剪並且無法訪問
      - text-overflow: ellipsis;
        溢出的內容被省略號代替：…
    - - alpha值可以從0（透明）變為1（不透明）
    - - text-shadow: 2px 6px 10px red;
        水平偏移量2px
        垂直偏移量6px
        陰影模糊10px
        紅色
- - - - list-style-position: outside;外
      - list-style-position: inside;包在裡面
    - - ist-style-image: url(/images/list-style-image.png);
        列表項將使用位於指定URL處的圖像
- - - - 定義背景圖案的來源
    - - background-image: none;
        刪除任何背景圖片
      - background-image: url(/images/jt.png);
        使用在url路徑中定義的圖像。此路徑可以是相對的（對於css文件）或絕對的（如http://cssreference.io/images/jt.png)
      - background-image: linear-gradient(red, blue);
        您可以將線性漸變定義為背景圖像
        您需要定義至少兩種顏色。第一個從頂部開始，第二個在底部
        默認角度是to bottom（或180deg），這意味著漸變是垂直的，從頂部開始，結束於元素的底部。
      - background-image: linear-gradient(45deg, red, blue);
        您可以指定角度，無論是以度數還是使用關鍵字
        使用degress時，可以指定漸變的方向或結束時的方向。因此，0deg意味著元素的頂部，如時鐘上的12:00
      - background-image: radial-gradient(green, purple);
        您可以將徑向漸變定義為背景圖像
        您需要定義至少兩種顏色。第一個將在中心，第二個在邊緣
      - background-image: radial-gradient(circle, green, purple);
        您可以指定徑向漸變的形狀：圓形或橢圓形
      - background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);
        您可以使用百分比值指定顏色停止
      - background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);
        您可以指定其中的梯度應該結束
        
        closest-side
        
        closest-corner
        
        farthest-side
        
        farthest-corner
      - background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);
        和the一樣background-position，你可以指定漸變的位置
    - - 細節範例
    - - background-color: rgb(50, 115, 220);
        您可以使用rgb（）顏色代碼：
      - background-color: rgba(50, 115, 220, 0.3);
        您可以使用rgba（）顏色代碼
      - background-color: #05ffb0;
        您可以使用十六進制顏色代碼
      - background-color: hsl(14, 100%, 53%);
        您可以使用hsl（）顏色代碼
      - background-color: red;
        您可以使用140多種顏色名稱之一
      - background-color: hsla(14, 100%, 53%, 0.6);
        你可以使用hsl（）一個顏色代碼
        前3個值是 hsl
        第四個值用於alpha通道並定義顏色的不透明度
        alpha值可以從0（透明）變為1（不透明）
      - background-color: transparent;
        默認情況下，背景顏色是透明的，基本上意味著沒有背景顏色
    - - 範例
    - - background-clip: padding-box;
        背景僅延伸到邊框的邊緣：它包括填充而不是邊框
      - background-clip: content-box;
        背景僅延伸到內容的邊緣：它不包括填充和邊框
      - background-clip: border-box;
        背景完全貫穿整個元素，甚至在邊界之下
    - - 常用的CONTAIN
    - - background-attachment: scroll;
        背景圖片將與頁面一起滾動。它還會根據它應用的元素來定位和調整自己的大小
      - background-attachment: fixed;
        背景圖片不會隨頁面一起滾動，並根據視口保持定位。它也會根據視口來定位和調整自己的大小。因此，背景圖片可能只會部分可見
- - - - top
        left
        right
        bottom
        
        border:1px 0px 3px
        上1px 左右為0 下3px
    - - content-box需要計算
      - border-box不需要計算
    - - top
        left
        right
        bottom
        
        常用margin 0 auto;
    - - 搭配overflow刪除溢出
- - - - animation-delay: 2400ms;
        您可以使用毫秒而不是秒，並使用關鍵字ms。
      - animation-delay: -500ms;
        您可以使用負值：動畫將開始就好像它已經被打了500ms。
      - animation-delay: 0s;
        動畫將等待零秒，因此立即開始。
      - animation-delay: 1.2s;
        您可以使用關鍵字在秒內使用十進制值。s
    - - animation-direction: reverse;
        動畫向後播放：從最後一個關鍵幀開始，在第一個關鍵幀完成。
      - animation-direction: alternate;
        動畫首先向前播放，然後向後播放：
      - animation-direction: alternate-reverse;
        在播放動畫時向後，再向前：
    - - animation-duration: 1.2s;
        您可以使用關鍵字在秒內使用十進制值。s
      - animation-duration: 2400ms;
        您可以使用毫秒而不是秒，並使用關鍵字ms。
      - animation-duration: 0s;
        默認值為零秒：動畫將無法播放。
    - - animation-fill-mode: forwards;
        之後保留在動畫結尾處應用的最後一種樣式
      - animation-fill-mode: backwards;
        動畫的樣式將在動畫實際啟動之前應用。
      - animation-fill-mode: none;
        該動畫的風格並不影響默認的風格：動畫開始之前，以及動畫結束後返回到默認狀態的元素被設置為默認狀態
    - - animation-iteration-count: 2;
        您可以使用整數值來定義動畫播放的特定次數
      - animation-iteration-count: infinite;
        通過使用關鍵字infinite，動畫將無限期地播放
      - animation-iteration-count: 1;
        動畫只播放一次
    - - animation-name: fadeIn;
        如果指定了名稱，則將使用與該名稱匹配的關鍵幀
      - animation-name: moveRight;
        又如：moveRight動畫：
      - animation-name: none;
        如果未指定動畫名稱，則不播放動畫
      - 範例網址
    - - animation-play-state: running;
        如果animation-duration和animation-name定義，動畫將自動開始播放
      - animation-play-state: paused;
        動畫在第一個關鍵幀處暫停設置。
      - 範例網址
    - - animation-timing-function: ease-out;
        動畫開始迅速，並逐漸減速直到結束。
      - animation-timing-function: ease-in-out;
        喜歡ease，但更明顯
        動畫開始迅速，並逐漸減速直到結束
      - animation-timing-function: ease-in;
        動畫開始緩慢，並逐漸加速直到結束
      - animation-timing-function: linear;
        動畫有*恆定速度
      - defaultanimation-timing-function: ease;
        動畫開始緩慢，中間加速，最後放慢速度。
      - animation-timing-function: step-start;
        動畫立即跳轉到最終狀態。
      - animation-timing-function: step-end;
        動畫保持在初始狀態直到結束，當它瞬間跳轉到最終狀態時。
      - animation-timing-function: steps(4, end);
        通過使用steps()與一個整數，則可以定義一個特定的號碼到達結束之前的步驟。元素的狀態不會逐漸變化，而是會在不同的瞬間從一個狀態跳到另一個狀態