看不到效果?
如果您看不到正確的呈現?(強烈建議以下)
  1. 請安裝新式瀏覽器並更新至最新版本。
  2. 如果您是使用新版 ie 仍舊看不到應有的呈現:
    • [功能表列] > [工具] > [相容性檢視設定],取消勾選 [ … Microsoft …更新 … 清單] 。這將會影響您瀏覽其它不當編排的網站,如果您不想這樣,只是想這次暫時看到,請使用下一項方式。
    • [功能表列] > [工具] > [F12 開發者工具] (或直接按 F12) ,在開啟的下方視窗 [瀏覽器模式或使用者代理程式] 選 [Internet Explorer 新版編號或預設值] , [文件模式] 選 [Internet Explorer 標準或預設值] ;再按 F12 就可以關掉下方視窗。這個方式可能每次進站都需要再麻煩指定一次。
    • 如果您使用的是 Windows XPInternet Explorer ,很抱歉本站大部分的内容不適合您。

css transform 能旋轉、傾斜、縮放變形 box

  • 說明:運用 css level 3 (css 3) 的 transform 特性 (css properties) ,直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ,甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形,不再侷限只能在僵硬的矩形框,對網頁排版及設計上會有很大的彈性和突破,而且對網頁正常的編排不會有相互排擠問題,一格黏接一格耗時費工的殘腦時代終將走入歷史。本篇僅先就 2D transform 的部分討論。
  • 適合:有 htmlcss 語法基礎概念者。
  • 難度:等級2
  • 更新:
  • 支援:詳細可參考 Can I Use 。(至更新時,部分仍為廠商專屬擴充特性,須加上辨識詞)
標準語法
transform: transform-function;
說明
  • 特性值不像一般的數值,而是以像數學函數的方式表示;因為數據需要經過較複雜的公式運算出四邊形四角的位置。依照各種不同的變形效果,有數種變形函數,稍後說明。
  • 預設值 none ;表示沒有套上任何變形。
  • 如果變形函數中使用百分比 (%) 做為移動的數據,以元素本身的 box 尺寸為百分比計算基準。注意,這和 css box 以容納區 (containing block) 尺寸為計算基準不同。
  • 同一元素可套用多個變形函數,函數間以半形空格間隔,瀏覽器會依序套用。
  • 預設變形的參考點在 box 中心,旋轉、傾斜、縮放、移動等都以參考點為基準。透過 transform-origin 特性 (稍後說明) ,可指定不同的位置點;例如我們想以元素的左上角為旋轉中心軸,或是中心軸改在元素的外面也可以。
  • 適用元素: transformable element
  • 適用媒體: visual
  • 不被繼承。
變形函數 2D transform-function (transformation functions)

函數括號內的角度 θ 參數必須有單位,可以是 deg (角度 ° ) 、 rad (弧度) 、 grad (梯度) ,大小寫都可接受; m, a, b, c, d, e, f 參數為數字,不需要單位; o 參數為合法的尺寸值 (length) 或 % (百分比) 。

rotate(θ)
指定元素以參考點為中心軸 2D 旋轉 θ 度。
skewX(θ)
指定元素以參考點為中心軸沿著橫向傾斜 θ 度。
skewY(θ)
指定元素以參考點為中心軸沿著縱向傾斜 θ 度。
skew(θxy)
指定元素以參考點為中心軸沿著橫向傾斜 θx 度、 縱向傾斜 θy 度。參數如果只指定 1 個,省略的第 2 個參數,會視為 0 ,也就是只有沿橫向傾斜。September, 2012 w3c 草書又復原此項
scaleX(m)
指定元素由參考點橫向縮放 m 倍。
scaleY(m)
指定元素由參考點縱向縮放 m 倍。
scale(mx,my)
指定元素由參考點 2D 橫向縮放 mx 倍、縱向縮放 my 倍,等於是結合 scaleX(mx), scaleY(my) 。參數如果只指定 1 個,省略的第 2 個參數,會等於第 1 個,也就是橫向、縱向以相同比例縮放。
translateX(o)
指定元素由參考點橫向移動 o 距離。
translateY(o)
指定元素由參考點縱向移動 o 距離。
translate(ox,oy)
指定元素由參考點 2D 橫向移動 ox 距離、縱向移動 oy 距離,等於是結合 translateX(ox), translateY(oy) 。參數如果只指定 1 個,省略的第 2 個參數,會視為 0 ,也就是只有橫向移動。
matrix(a,b,c,d,e,f)
指定元素由參考點依據數學變形矩陣 (transformation matrix) 的 6 個參數值產生 2D 變形。矩陣的目的主要在運算出四邊形四角的座標,屬於數學問題,這裡就不作太多討論了。事實上,前述的各項變形函數都是簡化這個矩陣而拆解出來的,稍後範例會看到對照。有一些線上工具可以比較容易幫我們產生這些參數值。
語法實例
transform:rotate(3deg);
transform:skewX(20deg);
transform:scaleY(1.8);
transform:translateX(60px);
transform:translate(180px) rotate(-5deg) scale(0.8);
transform:matrix(0,1.611,1.611,0.278,5,5);

後面會有更多例子討論。

transform-origin 特性 (property) 指出變形的參考點座標 (中心軸)

標準語法
transform-origin: x y;
說明
  • 共有 2 個特性值,每個值之間以至少一個半形空格間隔。
  • 2 個值可以是尺寸值 (length) 或 % (百分比) 或方位關鍵字 (keywords) ; % 以元素本身的 box 尺寸為百分比計算基準。
  • 使用尺寸值或 % ,依序表示參考點橫座標 (x) 、縱座標 (y) 。 padding-box 的左上角座標為 (0,0) 。
  • 預設值為 50% 50% ;就是在 box 中心點。
  • 使用方位關鍵字 (center, top, right, bottom, left) ,依據字意即可表示方向和位置,所以 2 個值沒有順序問題。
  • 如果省略第 2 個值,會視為 center (50%) 。
  • 適用元素:transformable element
  • 適用媒體: visual
  • 不被繼承。
語法實例
transform-origin:100px 20px;
transform-origin:right;

廠商專屬擴充特性 (vendor-specific extensions)

各家瀏覽器廠商都有自創的 css 特性或值 (多半指非 w3c 標準規範) ,可提供更多額外的功用。廠商經常為了搶先支援 w3c 未正式發佈的規範,也會先以擴充特性來處理。

廠商專屬擴充特性的語法: - (減號) 接上廠商辨識詞 (vendor identifier) ,再接 - (減號) 作為類似前置詞,然後再接 css 特性或值。最前面的 - (減號) 換成 _ (底線) 也可以,目前大多習慣用 - 。

以下列出幾個較常見的瀏覽器供應廠商:

  • -moz-特性:適用 firefoxMozilla Gecko 系列。
  • -webkit-特性:適用 safari, google chrome 等系列。
  • -o-特性:適用 opera 系列; opera 15 後改版成 -webkit-
  • -ms-特性:適用 iemicrosoft 系列。

例如在 ie 用到的濾鏡特性 -ms-filter 就是 。

思考 - css 變形效果 (css transform) 突破網頁排版障礙

css transform 變形效果支援的 html 元素,舉凡圖片 (img) 、視訊影片 (video) 、多媒體物件 (object) 都可以旋轉、傾斜,這讓設計者輕輕鬆鬆就能做出令人驚歎的視覺效果。

元素經過變形後,瀏覽器會以插補像素 (interpolation) 運算後重新繪製呈現,以降低出現鋸齒或模糊的現象,這是值得讚許的技術,因為不再需要花不必要的工夫去處理變形後圖形失真或文字模糊的問題。各家瀏覽器插補運算方式當然不盡相同,所以看起來會有些許差異。

至更新時, transform 特性在部分瀏覽器,如 google chrome, safari 等,仍為的專屬擴充特性,所以在特性前需要加上廠商辨識詞,稍後範例的語法以較淡色呈現這部分。而新版的 firefoxie 10 已不需加廠商辨識詞。

每個範例的 css 都有指定相同的背景顏色、相同的 border 。另外加了紅色瞄準標記,只是為了表示變形參考點位置,所以語法內沒有列出。
background:rgba(90%,95%,100%,0.85);
border:1px solid silver;
display:inline-block;
padding:0.5em 0.75em;

以下範例的每項主題都有加了對應的 css 效果,沒看到應該有的效果?

旋轉效果 transform:rotate(θ)

旋轉的變形矩陣語法 transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

以元素 box 中心點為旋轉軸,順時針旋轉 3° 。 (游標移入可比較原來的樣子)

元素的所有內容,包括文字、圖片也都旋轉,而且不會影響其它版面編排。

-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
以元素 box 右下角為旋轉軸,逆時針旋轉 3° (負數角度) 。 (游標移入可比較原來的樣子)

transform-origin 特性指定右下角為旋轉的基準點。

-moz-transform-origin:right bottom;
-moz-transform:rotate(-3deg);
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-3deg);
-o-transform-origin:right bottom;
-o-transform:rotate(-3deg);
-ms-transform-origin:right bottom;
-ms-transform:rotate(-3deg);
transform-origin:right bottom;
transform:rotate(-3deg);
翻轉效果,倒過來看…還有什麼不可能?

旋轉 180° 、或是範例的 π 弧度 (轉半圈) ,就會翻倒了。 (游標移入中心可比較原來的樣子)

-moz-transform:rotate(3.14159rad);
-webkit-transform:rotate(3.14159rad);
-o-transform:rotate(3.14159rad);
-ms-transform:rotate(3.14159rad);
transform:rotate(3.14159rad);

傾斜效果 transform:skewX(θ), transform:skewY(θ), transform:skew(θxy)

傾斜的變形矩陣語法 transform:matrix(1,tanθy,tanθx,1,0,0)

以元素 box 下緣中間為基準,沿著橫向 (橫軸) 平行方式傾斜 20° 。 (游標移入可比較原來的樣子)

transform-origin 特性指定下緣中間為傾斜的基準點,只用特性值 bottom ,另一方向視為 center

-moz-transform-origin:bottom;
-moz-transform:skewX(20deg);
-webkit-transform-origin:bottom;
-webkit-transform:skewX(20deg);
-o-transform-origin:bottom;
-o-transform:skewX(20deg);
-ms-transform-origin:bottom;
-ms-transform:skewX(20deg);
transform-origin:bottom;
transform:skewX(20deg);
以元素 box 左側中間為基準,沿著縱向 (縱軸) 以平行方式傾斜 5° 。 (游標移入可比較原來的樣子)

transform-origin 特性指定左緣中間為傾斜的基準點,只用特性值 left ,另一方向視為 center

-moz-transform-origin:left;
-moz-transform:skewY(5deg);
-webkit-transform-origin:left;
-webkit-transform:skewY(5deg);
-o-transform-origin:left;
-o-transform:skewY(5deg);
-ms-transform-origin:left;
-ms-transform:skewY(5deg);
transform-origin:left;
transform:skewY(5deg);
沿橫向傾斜 -25°,也沿縱向傾斜 5° 。 (游標移入可比較原來的樣子)

連續指定沿著橫軸及縱軸傾斜。

-moz-transform:skewX(-25deg) skewY(5deg);
-webkit-transform:skewX(-25deg) skewY(5deg);
-o-transform:skewX(-25deg) skewY(5deg);
-ms-transform:skewX(-25deg) skewY(5deg);
transform:skewX(-25deg) skewY(5deg);

縮放效果 transform:scaleX(m), transform:scaleY(m), transform:scale(mx,my)

縮放的變形矩陣語法: transform:matrix(mx,0,0,my,0,0)

以元素 box 左側中間為基準,橫向 (僅寬) 放大 1.2 倍。 (游標移入可比較原來的樣子)

transform-origin 特性指定左側中間為放大的基準點,只用特性值 0 ,垂直方向視為 center

-moz-transform-origin:0;
-moz-transform:scaleX(1.2);
-webkit-transform-origin:0;
-webkit-transform:scaleX(1.2);
-o-transform-origin:0;
-o-transform:scaleX(1.2);
-ms-transform-origin:0;
-ms-transform:scaleX(1.2);
transform-origin:0;
transform:scaleX(1.2);
以元素 box 中心為基準,縱向 (僅高) 放大 1.8 倍。 (游標移入可比較原來的樣子)

以中心為基準,縱向橫向縮放都會向上下或左右兩個方向內縮或擴大。

-moz-transform:scaleY(1.8);
-webkit-transform:scaleY(1.8);
-o-transform:scaleY(1.8);
-ms-transform:scaleY(1.8);
transform:scaleY(1.8);
以元素 box 左側中間為基準,橫向縮小 0.8 倍、縱向放大 1.8 倍。 (游標移入可比較原來的樣子)

scale() 指定 2 個參數依序表示橫向、縱向縮放,等於是結合 scaleX(), scaleY() 。以 transform-origin 特性指定左側中間為縮放的基準點,只用特性值 0 ,垂直方向視為 center

-moz-transform-origin:0;
-moz-transform:scale(0.8,1.8);
-webkit-transform-origin:0;
-webkit-transform:scale(0.8,1.8);
-o-transform-origin:0;
-o-transform:scale(0.8,1.8);
-ms-transform-origin:0;
-ms-transform:scale(0.8,1.8);
transform-origin:0;
transform:scale(0.8,1.8);
以元素 box 中心為基準,橫向縱向等比例縮小 0.8 倍。 (游標移入可比較原來的樣子)

簡單地只指定 1 個參數表示橫向、縱向縮放同一比例,也就是等同 scale(0.8,0.8) 的意思。

-moz-transform:scale(0.8);
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
鏡射效果,就像倒影或照鏡子效果。

負數的縱向縮放參數產生上下顛倒的效果,負數的橫向縮放參數產生左右顛倒的效果,就像倒影或照鏡子效果。 (游標移入桃紅色符號中央可比較原來的樣子)

-moz-transform:scaleY(-1.8);
-webkit-transform:scaleY(-1.8);
-o-transform:scaleY(-1.8);
-ms-transform:scaleY(-1.8);
transform:scaleY(-1.8);

移動效果 transform:translateX(o), transform:translateY(o), transform:translate(ox,oy)

移動的變形矩陣語法: transform:matrix(1,0,0,1,ox,oy)

以元素 box 中心點為基準,向右橫向移動 60 像素。 (游標移入可比較原來的樣子)

橫向移動,正值向右、負值向左。這樣的效果和以往運用 position:relative; 指定位移 (offset) 的方法簡直沒什麼兩樣,但是這個移動方式除了語法單純易懂外,還可結合其它變形,更具發揮設計的便利。

-moz-transform:translateX(60px);
-webkit-transform:translateX(60px);
-o-transform:translateX(60px);
-ms-transform:translateX(60px);
transform:translateX(60px);
以元素 box 中心點為基準,向右橫向移動本身寬度 50% 的距離。 (游標移入可比較原來的樣子)

以百分比為單位,橫向移動以元素本身的寬度計算,縱向移動則以的高度計算;這和 css box 以容納區 (containing block) 尺寸為百分比計算的基準不同。

-moz-transform:translateX(50%);
-webkit-transform:translateX(50%);
-o-transform:translateX(50%);
-ms-transform:translateX(50%);
transform:translateX(50%);
以元素 box 中心點為基準,向下縱向移動 0.75em。 (游標移入可比較原來的樣子)

縱向移動,正值向下、負值向上。

-moz-transform:translateY(0.75em);
-webkit-transform:translateY(0.75em);
-o-transform:translateY(0.75em);
-ms-transform:translateY(0.75em);
transform:translateY(0.75em);
以元素 box 中心點為基準,向左 40 像素、向下 8 像素,整個朝左下方向移動。 (游標移入可比較原來的樣子)

translate() 指定 2 個參數依序表示橫向、縱向移動距離,等於是結合 translateX(), translateY()。如果只指定 1 個,省略的第 2 個參數,會視為 0 ;沒有另外指定縱向移動,translate(50px)translateX(50px)會是一樣的。

-moz-transform:translate(-40px,8px);
-webkit-transform:translate(-40px,8px);
-o-transform:translate(-40px,8px);
-ms-transform:translate(-40px,8px);
transform:translate(-40px,8px);

同時綜合多種不同變形效果。

以元素 box 中心點為基準,橫移 180 像素、旋轉 -5° 、縮小 0.8 。 (游標移入可比較原來的樣子)

同時在一個元素加入 3 種變形效果,以半形空格間隔,會依序運算套用。

-moz-transform:translate(180px) rotate(-5deg) scale(0.8);
-webkit-transform:translate(180px) rotate(-5deg) scale(0.8);
-o-transform:translate(180px) rotate(-5deg) scale(0.8);
-ms-transform:translate(180px) rotate(-5deg) scale(0.8);
transform:translate(180px) rotate(-5deg) scale(0.8);
以元素 box 中心點為基準,旋轉 -5° 、縮小 0.8 、橫移 180 像素。 (游標移入可比較原來的樣子)

與前例套用相同 3 種變形效果,但是由於順序不同,仔細觀察其實是不同結果。橫移是在最後發生,所以實際上是延著旋轉後的角度 -5° 橫移 (不是水平方向) 。

-moz-transform:rotate(-5deg) scale(0.8) translate(180px);
-webkit-transform:rotate(-5deg) scale(0.8) translate(180px);
-o-transform:rotate(-5deg) scale(0.8) translate(180px);
-ms-transform:rotate(-5deg) scale(0.8) translate(180px);
transform:rotate(-5deg) scale(0.8) translate(180px);

matrix 複雜的變形矩陣,稍舊版 ie 也能玩 matrix

如果需要使用 matrix 產生更複雜的變形,矩陣的數值實在很難以一般方式計算。真好!感謝 Zoltan 寫好了可以幫我們產生 6 個參數的線上工具程式 Matrix Construction Set ,不過要有支援 html 5 Drag and Drop 的瀏覽器才能使用;也感謝 WEB 前端開發 (CSS88.com) 做了線上工具程式可輸入 6 個參數立即看到測試結果。讀者自己玩玩看囉!

ie8 及較舊版,可使用 ie 專屬擴充特性 Matrix filter (ie9 起已不再支援) ,原理與 transform:matrix(a,b,c,d,e,f) 是一樣的,語法大致上會是這樣:

filter:progid:DXImageTransform.Microsoft.Matrix(…);

對照參數 M11a, M21b, M12c, M22d, Dxe, Dyf ,詳細可參閱 microsoft Matrix filter

transform 後的異常

  • 表格 (如 table) :所有瀏覽器有效。指定 border-collapse:collapse; 特性 (儲存格間沒空隙) , firefox 原有 border 會消失。
  • 表格儲存格、表格列:在外層 table 元素指定了 border-collapse:collapse; 特性 (儲存格間沒空隙) ,各家瀏覽器產生有趣的呈現,讀者可以自行試試。
  • 擬元素 (Pseudo-elements) : ::first-letter, ::first-line 都不支援。
參考資源
散佈、展示請參閱 Creative Commons 授權條文,禁止重混,引述請增加原文連結。
文章標籤
創作者介紹

網頁藝術思考 - CSS 網頁設計藝術, 友善的無障礙網頁

不惑仔 發表在 痞客邦 PIXNET 留言(18) 人氣()


留言列表 (18)

發表留言
  • Kuang-Lin Pan
  • 這些特效在以前通常是用Flash代理,現在可以親眼看到,而且和其他元件完全不衝突,真的只能用 Cool 來形容!
  • 這篇很棒喔
  • 這很棒我喜歡
  • LILKrake章魚
  • 我可以加你的即時嗎?,想問一些問題
  • x
  • 用javascript如何控制
  • 上文末「參考資源」的第一項 W3C 官網裡有詳細 DOM 文件,可自行參考。

    文章開宗明義就已經很清楚說了, transform 是 css 樣式的 property ,當然用 js 樣式處理即可。

    ps.嗯,問事情至少也留個稱呼,這是基本禮貌吧!

    不惑仔 於 2012/04/16 21:52 回覆

  • 司 劉
  • x:忘了我有google帳號
    謝謝你的解釋和提醒((雖然還是有點不懂
    下次我會注意
  • 建議可以利用 js libraries 比較方便,
    如 jQuery css() function : http://api.jquery.com/css/

    不惑仔 於 2012/04/17 11:00 回覆

  • 希川
  • 好久沒跟不惑仔大大請教HTML+CSS和無障礙了
  • momo
  • 大大你好OAO
    在用噗浪的時候,發現可以旋轉
    想從對方的語法列裡面直接找到旋轉那個語法結果一直找不到TAT
    想請問
    http://www.flickr.com/photos/m66660000/5403465179/
    這張圖上那種固定在左上角的旋轉方式,要怎麼樣設定=X=?
  • 1.如果只是要旋轉,使用本文中所提的旋轉 rotate() 就可以輕易做到。
    2.該版不見得是你說的固定左上角旋轉,因為所有的元素都同樣角度旋轉,固定在任何角,看起來都是一樣的感覺。如果你一定要固定左上角,就使用本文中提到的 transform-origin 指定變形的參考點。

    該版面上不只一處有旋轉,而你並沒有明確指出那一部分,所以也沒辦法明確告訴你設定方式。

    不惑仔 於 2012/10/15 11:42 回覆

  • 劉灋
  • 謝謝賜教
    opera跟firefox已支援無標籤寫法
  • 呵呵
  • 这位绝对是大师
  • Johnny
  • 大大您好, 小弟網頁初學者, 很好奇您是用什麼方法達成"滑鼠移入後顯示原本樣式"的, 還懇請賜教, 謝謝!!
  • css pseudo-class selector → :hover 指定樣式即可。
    transform:none;

    不惑仔 於 2013/11/27 16:03 回覆

  • 在家吃自己
  • 謝謝前輩提供的連結!
    最近對於CSS animation很感興趣
    前輩的blog對我來說真是寶庫 XD
  • Jason Ho
  • 許多很實用的效果,贊一個!
  • 冠甫 劉
  • 前輩您好
    目前了解 CSS transform:rotate(15deg) 能夠 旋轉div
    不過關於 本網站的範例像動畫一樣 慢慢的變回正常角度
    請問是採用 jQuery 的 animate 方法做到的嗎?
    此語法該怎麼解呢?
  • 使用 *:hover (css pseudo-class selector )
    及 css transition 動畫變換屬性就可以了。

    用 jQuery animate 處理反而有點麻煩,因為 animate() 本身沒有辦法倒回 (yoyo) ;
    此站主題是 css 的文章,就只會以 css 做例子,為的是要完整展現 css 的用途喲。

    不惑仔 於 2014/08/26 13:48 回覆

  • 阿志
  • 獲益良多
  • 布加拉提
  • 我用scale縮放兩個字

    <div id="AA">天</div>
    <div id="BB">才</div>

    兩個div都是用transform:scale,只是放大倍率不一樣
    強迫會換行。我把div改成span也沒效

    我是希望天才兩個字都在同一行。請問有什麼方法?
  • div 內定是 display:block 當然會不同行;
    span 內定是 display:inline 會在同一行,但是 transform 卻無效,因為 transform 需要 block-level box 才有作用;
    所以,簡單的話,可以將元素指定為 display:inline-block 應該就可以達到您的需求。

    display 可以看看我這裡的動態解說 http://webchain.oreilly.tw/boohover/curriculum/css/display/

    這裡剛好有一個很類似您需求的範例,也可以看看 http://webchain.oreilly.tw/boohover/curriculum/css/css-positioning/position-relative.html#practice-2

    不惑仔 於 2015/08/03 21:00 回覆

  • 啊Q
  • 不惑仔大大您好~想請問一下,那除了文字以外.可以用來放大放影片的部份嗎..就是點擊想看的影片然後會自動放大視窗播放的方式,這部分是用CSS就可以控制的嗎?
  • transform 是縮放「元素」,例如影片是由 video 元素處理,當然可以 transform video 元素。文章內「思考」部分的最開頭就已經有提到,不知您有否看清楚?
    (對於您問題的說法,我覺得很奇怪,我的文章內就不是 transform 「文字」,不知為何您會說「除了文字以外…」?)

    不惑仔 於 2016/03/22 21:09 回覆

  • 啊Q
  • 抱歉0.0確實沒看到剛剛指細讀過後有看到您所說的.

    會說除了文字以外,是因為我想要嘗試做做看一般開網頁後影片本來是小方格
    等到點擊下去後會很像彈跳出另一格播放影片得視窗這樣得效果..所以不知道
    是否用transform做的到還是要去另找方法。
    還是很感謝您的答案
找更多相關文章與討論