CSS3繪製騰訊QQ企鵝

開始著手於QQ 企鵝的繪製, 第一步基本框架的繪製。

通過對Logo圖像的觀察，按照層次劃分來組合最終的效果。選擇使用絕對位置position:absolute;來佈局各個元素。主要劃分為頭部，身體，圍脖，雙手，雙腳。

基本框架結構就是這樣的，QQ 對於容器是通過絕對定位來對每個元素佈局進行設置的。

QQ Logo容器（畫板）：

/** * QQ Logo 繪製 */#qq { position: relative; margin: 0 auto; width: 420px; height: 400px; outline: gold solid 2px;}

骨架出來了，那我們就開始一步步的進行繪製了，先從頭開始：

繪製 head 前，還是跟步驟1一樣，先對 head 的層次結構劃分清楚，依次為：左眼、右眼、上嘴唇、下嘴唇、嘴唇的層次感體現

繪製 head 的輪廓：

 /* QQ head */.head { position: absolute; top: 18px; left: 96px; width: 234px; height: 185px; border: 1px solid #000; /* 通過對border-radius 圓弧的層度來進行鉤畫 */ border-top-left-radius: 117px 117px; border-top-right-radius: 117px 117px; border-bottom-left-radius: 117px 68px; border-bottom-right-radius: 117px 68px;}

圖中為什麼圓弧是設置成 border-bottom-left-radius: 117px 68px; 一般根據設計圖出來後導出轉成帶有標尺圖後，會自動計算出值；如果沒有的話，那就要通過計算了。

然後依次繪製 head 其他結構：

眼睛

/* 眼睛 */.eye { position: absolute; width: 44px; height: 66px; border:1px solid #000; border-radius: 50% 50%;}.left.eye { left: 62px; top: 50px;}.right.eye { left: 132px; top: 50px;}

嘴

/* QQ head -> mouth */.mouthTopContainer { position: absolute; top: 120px;left: 39px; width: 158px; height: 29px; border: 1px solid #000;}.mouthBottomContainer { position: absolute; top: 146px;left: 39px; width: 158px; height: 15px; border: 1px solid #000;}

到這裡基本頭的骨架就出來，然後就是對頭的骨架結構的線條進行修飾，現在太醜了，對吧！

眼睛

  
 
  
 
  
  
 
/* QQ head -> eye */.eye { position: absolute; width: 44px; height: 66px; border:1px solid #000; border-radius: 50% 50%;}.left.eye { left: 62px; top: 50px;}.right.eye { left: 132px; top: 50px;}.innerLeftEye { position: absolute; top: 20px; left: 20px; width: 18px; height: 24px; border-radius: 50%; border: 1px solid #000;}.innerLeftEye::after { content: ""; position: absolute; top: 6px; left: 9px; width: 6px; height: 8px; border: 1px solid #000; border-radius: 50%;}.innerRightEye { position: absolute; top: 20px; left: 8px; /* 月牙眼球外輪廓 */ width: 18px; height: 24px; border: 1px solid #000; border-top-left-radius: 50% 90%; border-top-right-radius: 50% 90%; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%;}.innerRightEye::after { content: ""; position: absolute; bottom: -1px;left: 4px; /* 月牙眼球內部輪廓 */ width: 10px; height: 13px; border: 1px solid #000; border-top-left-radius: 50% 100%;border-top-right-radius: 35% 80%;}.fix { position: absolute; top: 17px; width: 4px; height: 4px; border: 1px solid #000; border-radius: 50%;}.fix:after{content: ""; position: absolute; top: 0;left: 14px;width: 4px; height: 4px; border: 1px solid #000;border-radius: 50%;}

嘴

 
 
 
 
 
 
 
 
 
/* QQ head -> mouth */.mouthTopContainer { /* 定位 */ position: absolute; top: 120px;left: 39px; width: 158px; height: 29px; overflow: hidden; /* 隱藏超出部分 */}.mouthTop { /* 上嘴唇輪廓 */ position: absolute; top: 0;left: 0; width: 158px; height: 34px; border: 1px solid #000; border-top-left-radius: 45% 34px;border-top-right-radius: 45% 34px;}.mouthBottomContainer { position: absolute; top: 146px;left: 39px; width: 158px; height: 15px; overflow: hidden; /* 隱藏超出部分 */}.mouthBottom { position: absolute; top: -4px;left: 0; width: 158px; height: 24px; border: 1px solid #000; border-top:none; border-bottom-left-radius: 45% 24px;border-bottom-right-radius: 45% 24px;}/* 嘴唇上下層次感-咬合部位 */.lispContainer { /* 定位 */ position: absolute;top: 146px;left: 60px; width: 116px; height: 24px;}.lips { position: absolute;top: 0;left: 0; width: 116px; height: 24px; border: 1px solid #FFA600; border-bottom-left-radius: 50% 100%;border-bottom-right-radius: 50% 100%;}

基本 head 輪廓就是這樣了，最後在把右眼眼球部分上個色，來進行層疊覆蓋隱藏

.innerRightEye { position: absolute; top: 20px; left: 8px; /* 月牙眼球外輪廓 */ width: 18px; height: 24px; /* border: 1px solid #000; */ border-top-left-radius: 50% 90%; border-top-right-radius: 50% 90%; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; background: black;box-shadow: 0 -1px 2px black;}.innerRightEye::after { content: ""; position: absolute; bottom: -1px;left: 4px; /* 月牙眼球內部輪廓 */ width: 10px; height: 13px; /* border: 1px solid #000; */ border-top-left-radius: 50% 100%; border-top-right-radius: 35% 80%; background: white;}.fix { position: absolute; top: 19px; width: 4px; height: 4px; /* border: 1px solid #000; */ border-radius: 50%; background: black;}.fix:after{content: ""; position: absolute; top: 0;left: 14px;width: 4px; height: 4px; /* border: 1px solid #000; */ border-radius: 50%; background: black;}

接下來 開始繪製 QQ 的 body 部分，老樣子對 body 進行層次結構劃分：圍巾、圍巾尾、內輪廓、外輪廓

先各個容器位置佈局好

/* QQ body */.body { /* body 容器定位 */ position: absolute; top: 135px; left: 48px; width: 326px; height: 300px; /* border: 1px solid #000; */}/* QQ body -> scarf */.scarf { position: absolute; top: -2px; left: 34px; width: 258px; height: 110px; border: 1px solid #000; border-top: none;}/* QQ body -> scarfEnd */.scarfEnd { position: absolute; left: 74px; top: 90px;width: 52px; height: 64px; border: 3px solid black;}/* QQ body -> innerWrapper */.innerWrapper { /* innerWrapper 容器定位 */ position: absolute; left: 30px;top: 76px; width: 280px; height: 200px; border: 1px solid #000;}/* QQ body -> outerWrapper */.outerWrapper{ /* outerWrapper 容器定位 */ position: absolute;top: 54px;overflow: hidden; width: 262px;left: 32px; height: 250px; border: 1px solid #000;}

輪廓線條修正

/* QQ body */.body { /* body 容器定位 */ position: absolute; top: 135px; left: 48px; width: 326px; height: 300px; /* border: 1px solid #000; */}/* QQ body -> scarf */.scarf { position: absolute; top: -2px; left: 34px; width: 258px; height: 110px; border: 1px solid #000; border-top-left-radius: 30px 34px;border-top-right-radius: 38px 34px;border-bottom-left-radius: 50% 76px; border-bottom-right-radius: 50% 76px; border-top: none;}/* QQ body -> scarfEnd */.scarfEnd { position: absolute; left: 74px; top: 90px;width: 52px; height: 64px; border: 3px solid black; border-bottom-left-radius: 50% 43%;border-bottom-right-radius: 15px;border-top-left-radius: 20% 57%;}/* QQ body -> innerWrapper */.innerWrapper { /* innerWrapper 容器定位 */ position: absolute; left: 30px;top: 76px; width: 280px; height: 200px; overflow: hidden;}.inner { position: absolute; left: 25px;top: -71px;width: 218px;height: 210px; border: 1px solid #000; border-radius: 50%;}/* QQ body -> outerWrapper */.outerWrapper{ /* outerWrapper 容器定位 */ position: absolute;top: 54px;overflow: hidden; width: 262px;left: 32px; height: 250px;}.outer{ position: absolute;top: -84px;width: 260px; height: 250px; border: 1px solid #000;border-radius: 125px;}

大致輪廓基本已經出來了，還有一些內部線條，等後面在來慢慢繪製。

接下來我們來繪製 hand 部分，安裝老路子層次結構劃分：左手、右手； 手的樣子需要通過兩個 div 進行整合才能繪製出來，所以再次劃分： 左手上、左手下、右手上、右手下

 
 
 
 
 
 
 
 
 
 
 
 
/* QQ handWrapper */.handWrapper{ /* 定位手的起始點 */position: absolute;top: 219px;left: 7px;}/* QQ handWrapper -left */.leftHandTopContainer { /* 定位 */position: absolute;top: 55px;left: 50px; width: 118px; height: 26px; border: 1px solid #000;transform-origin: bottom left;transform: rotate(-70deg);}.leftHandBottomContainer { /* 定位 */ position: absolute;top: 78px;left: 50px;width: 100px; height: 30px; border: 1px solid #000;transform-origin: top left;transform: rotate(-70deg);}/* QQ handWrapper -right */.rightHandTopContainer { /* 定位 */ position: absolute;top: 47px;left: 240px; width: 118px; height: 34px; border: 1px solid #000;transform-origin: bottom right; transform: rotate(65deg);}.rightHandBottomContainer{ /* 定位 */ position: absolute;top: 81px; left: 248px;width: 110px;height: 58px; border: 1px solid #000;transform-origin: top right;transform: rotate(90deg);}

線條輪廓修改

/* QQ handWrapper */.handWrapper{ /* 定位手的起始點 */position: absolute;top: 219px;left: 7px;}/* QQ handWrapper -left */.leftHandTopContainer { /* 定位 */position: absolute;top: 55px;left: 50px; width: 118px; height: 26px; /* border: 1px solid #000; */transform-origin: bottom left; transform: rotate(-70deg); overflow: hidden;}.leftHandTop { /* 上半部分 */width: 128px;height: 54px; border: 1px solid #050346; border-top-left-radius: 44% 38px; border-top-right-radius: 56% 33px;}.leftHandBottomContainer { /* 定位 */ position: absolute;top: 78px;left: 50px;width: 100px; height: 30px; /* border: 1px solid #000; */transform-origin: top left; transform: rotate(-70deg); overflow: hidden;}.leftHandBottom { position: absolute; top: -26px; width: 128px;height: 44px; border: 1px solid #050346; border-bottom-left-radius: 48% 20px;border-bottom-right-radius: 52% 23px;}/* QQ handWrapper -right */.rightHandTopContainer { /* 定位 */ position: absolute;top: 47px;left: 240px; width: 118px; height: 34px; /* border: 1px solid #000; */transform-origin: bottom right; transform: rotate(65deg); overflow: hidden;}.rightHandTop { position: absolute; left: -30px; width: 148px;height: 54px; border: 1px solid #050346; border-top-right-radius: 41% 54px; border-top-left-radius: 59% 48px;}.rightHandBottomContainer{ /* 定位 */ position: absolute;top: 81px; left: 248px;width: 110px;height: 58px; /* border: 1px solid #000; */transform-origin: top right; transform: rotate(90deg); overflow: hidden;}.rightHandBottom { position: absolute;top: 1px;left: 38px; width: 68px;height: 28px; border: 1px solid #000; border-bottom-right-radius: 100% 40px;}

是不是漂亮很多了， 那快點把腳的部分也完成吧,和手的結構基本類似。

基礎位置佈局

/* QQ footerWrapper */.footWrapper{ /* 定位起始點 */position: absolute;top: 292px; left: 80px; width: 300px; height: 80px; border: 1px solid #000;}/* QQ footerWrapper -> left */.leftFootTopWrapper { /* 定位左腳上容器 */ position: absolute;top: 16px;left: -1px; width: 130px; height: 37px; border: 1px solid #000;}.leftFootBottomWrapper { position: absolute; top: 52px;left: -1px;width: 130px;height: 38px; border: 1px solid #000;}/* QQ footerWrapper -> right */.rightFootTopWrapper { /* 定位左腳上容器 */ position: absolute;top: 22px;left: 134px; width: 130px; height: 38px; border: 1px solid #000;}.rightFootBottomWrapper { position: absolute; top: 52px;left: 134px;width: 134px; height: 38px; border: 1px solid #000;}

輪廓調整

/* QQ footerWrapper */.footWrapper{ /* 定位起始點 */position: absolute;top: 292px; left: 80px; width: 300px; height: 80px; /* border: 1px solid #000; */}/* QQ footerWrapper -> left */.leftFootTopWrapper { /* 定位左腳上容器 */ position: absolute;top: 16px;left: -1px; width: 130px; height: 37px; /* border: 1px solid #000; */ overflow: hidden;}.leftFootTop { position: absolute;top: -10px; left: 3px; width: 120px;height: 60px; border: 4px solid black; border-top-left-radius: 80% 70%;}.leftFootBottomWrapper { position: absolute; top: 52px;left: -1px;width: 130px;height: 38px; /* border: 1px solid #000; */ overflow: hidden;}.leftFootBottom { position: absolute; top: -30px;left: 3px; width: 120px;height: 60px; border: 4px solid #000; border-top-left-radius: 50% 44%;border-top-right-radius: 50% 44%;border-bottom-left-radius: 50% 56%;border-bottom-right-radius: 50% 56%;}/* QQ footerWrapper -> right */.rightFootTopWrapper { /* 定位左腳上容器 */ position: absolute;top: 22px;left: 134px; width: 130px; height: 38px; /* border: 1px solid #000; */ overflow: hidden;}.rightFootTop { position: absolute; top: 0px;left: 4px; width: 120px;height: 60px; border: 4px solid black; border-top-right-radius: 32% 65%;}.rightFootBottomWrapper { position: absolute; top: 52px;left: 134px;width: 134px; height: 38px; /* border: 1px solid #000; */ overflow: hidden;}.rightFootBottom { position: absolute; top: -30px;left: 3px; width: 120px;height: 60px; border: 4px solid #000; border-top-left-radius: 50% 56%;border-top-right-radius: 50% 56%;border-bottom-left-radius: 50% 44%;border-bottom-right-radius: 50% 44%;}

基本整體框架結構就出來了，開始上色吧。上色的過程可以幫助我們調整z-index，也就是各個模塊的重疊層次，遮蓋了一些無用的線條和框角。

1. head 開始

 /* QQ head */.head { position: absolute; top: 18px; left: 96px; width: 234px; height: 185px; border: 1px solid #000; border-top-left-radius: 117px 117px; border-top-right-radius: 117px 117px; border-bottom-left-radius: 117px 68px; border-bottom-right-radius: 117px 68px; background: #000;}/* QQ head -> eye */.eye { position: absolute; width: 44px; height: 66px; border:1px solid #000; border-radius: 50% 50%; background: #fff;}.left.eye { left: 62px; top: 50px;}.right.eye { left: 132px; top: 50px;}.innerLeftEye { position: absolute; top: 20px; left: 20px; width: 18px; height: 24px; border-radius: 50%; border: 1px solid #000; background: #000;}.innerLeftEye::after { content: ""; position: absolute; top: 6px; left: 9px; width: 6px; z-index: 11; height: 8px; /* border: 1px solid #000; */ border-radius: 50%; background: #fff;}.innerRightEye { position: absolute; top: 20px; left: 8px; /* 月牙眼球外輪廓 */ width: 18px; height: 24px; /* border: 1px solid #000; */ border-top-left-radius: 50% 90%; border-top-right-radius: 50% 90%; border-bottom-left-radius: 50% 10%; border-bottom-right-radius: 50% 10%; background: black; box-shadow: 0 -1px 2px black;}.innerRightEye::after { content: ""; position: absolute; bottom: -1px;left: 4px; /* 月牙眼球內部輪廓 */ width: 10px; height: 13px; /* border: 1px solid #000; */ border-top-left-radius: 50% 100%; border-top-right-radius: 35% 80%; background: #FFF;}.fix { position: absolute; top: 19px; width: 4px; height: 4px; /* border: 1px solid #000; */ border-radius: 50%; background: #000;}.fix:after{content: ""; position: absolute; top: 0;left: 14px;width: 4px; height: 4px; /* border: 1px solid #000; */ border-radius: 50%; background: black;}/* QQ head -> mouth */.mouthTopContainer { /* 定位 */ position: absolute; top: 120px; left: 39px; z-index: 1; width: 158px; height: 29px; overflow: hidden; /* 隱藏超出部分 */}.mouthTop { /* 上嘴唇輪廓 */ position: absolute; top: 0; left: 0; z-index: 1; width: 158px; height: 34px; border: 1px solid #FFA600; border-top-left-radius: 45% 34px; border-top-right-radius: 45% 34px; background: #FFA600;}.mouthBottomContainer { position: absolute; top: 146px; left: 39px; z-index: 1; width: 158px; height: 15px; overflow: hidden; /* 隱藏超出部分 */}.mouthBottom { position: absolute; top: -4px; left: 0; z-index: 1; width: 158px; height: 24px; border: 1px solid #FFA600; border-top:none; border-bottom-left-radius: 45% 24px; border-bottom-right-radius: 45% 24px; background: #FFA600;}/* 嘴唇上下層次感-咬合部位 */.lispContainer { /* 定位 */ position: absolute;top: 146px;left: 60px; width: 116px; height: 24px;}.lips { position: absolute;top: 0;left: 0; width: 116px; height: 24px; border: 1px solid #FFA600; border-bottom-left-radius: 50% 100%; border-bottom-right-radius: 50% 100%; background: #FFA600;}

1. body

/* QQ body */.body { /* body 容器定位 */ position: absolute; top: 135px; left: 48px; width: 326px; height: 300px; /* border: 1px solid #000; */}/* QQ body -> scarf */.scarf { position: absolute; top: -2px; left: 34px; z-index: 5; width: 258px; height: 110px; border: 1px solid #000; border-top-left-radius: 30px 34px;border-top-right-radius: 38px 34px;border-bottom-left-radius: 50% 76px; border-bottom-right-radius: 50% 76px; border-top: none; background: #FB0009;}/* QQ body -> scarfEnd */.scarfEnd { position: absolute; left: 74px; top: 90px;width: 52px; height: 64px; border: 3px solid black; border-bottom-left-radius: 50% 43%;border-bottom-right-radius: 15px; border-top-left-radius: 20% 57%; background: #FB0009;}/* QQ body -> innerWrapper */.innerWrapper { /* innerWrapper 容器定位 */ position: absolute; left: 30px;top: 76px; width: 280px; height: 200px; overflow: hidden;}.inner { position: absolute; left: 25px;top: -71px;width: 218px;height: 210px; border: 1px solid #000; border-radius: 50%; background: #fff;}/* QQ body -> outerWrapper */.outerWrapper{ /* outerWrapper 容器定位 */ position: absolute;top: 54px;overflow: hidden; width: 262px;left: 32px; height: 250px;}.outer{ position: absolute;top: -84px;width: 260px; height: 250px; border: 1px solid #000; border-radius: 125px; background: #000;}

上色後你會發現，有的圖層顯示先後順序不對，需要調整下先後順序。

• head > body
• body裡（scafEnd > inner > outer）

1. hand

/* QQ handWrapper -left */.leftHandTopContainer { /* 定位 */position: absolute;top: 55px;left: 50px; width: 118px; height: 26px; /* border: 1px solid #000; */transform-origin: bottom left; transform: rotate(-70deg); overflow: hidden;}.leftHandTop { /* 上半部分 */width: 128px;height: 54px; border: 1px solid #050346; border-top-left-radius: 44% 38px; border-top-right-radius: 56% 33px; background: #000;}.leftHandBottomContainer { /* 定位 */ position: absolute;top: 78px;left: 50px;width: 100px; height: 30px; /* border: 1px solid #000; */transform-origin: top left; transform: rotate(-70deg); overflow: hidden;}.leftHandBottom { position: absolute; top: -26px; width: 128px;height: 44px; border: 1px solid #050346; border-bottom-left-radius: 48% 20px; border-bottom-right-radius: 52% 23px; background: #000;}/* QQ handWrapper -right */.rightHandTopContainer { /* 定位 */ position: absolute;top: 47px;left: 240px; width: 118px; height: 34px; /* border: 1px solid #000; */transform-origin: bottom right; transform: rotate(65deg); overflow: hidden;}.rightHandTop { position: absolute; left: -30px; width: 148px;height: 54px; border: 1px solid #050346; border-top-right-radius: 41% 54px; border-top-left-radius: 59% 48px; background: #000;}.rightHandBottomContainer{ /* 定位 */ position: absolute;top: 81px; left: 248px;width: 110px;height: 58px; /* border: 1px solid #000; */transform-origin: top right; transform: rotate(90deg); overflow: hidden;}.rightHandBottom { position: absolute;top: 1px;left: 38px; width: 68px;height: 28px; border: 1px solid #000; border-bottom-right-radius: 100% 40px; background: #000;}

1. footer

/* QQ footerWrapper */.footWrapper{ /* 定位起始點 */position: absolute;top: 292px; left: 80px; width: 300px; height: 80px; /* border: 1px solid #000; */}/* QQ footerWrapper -> left */.leftFootTopWrapper { /* 定位左腳上容器 */ position: absolute;top: 16px;left: -1px; width: 130px; height: 37px; /* border: 1px solid #000; */ overflow: hidden;}.leftFootTop { position: absolute;top: -10px; left: 3px; width: 120px;height: 60px; border: 4px solid black; border-top-left-radius: 80% 70%; background: #FF9C00;}.leftFootBottomWrapper { position: absolute; top: 52px;left: -1px;width: 130px;height: 38px; /* border: 1px solid #000; */ overflow: hidden;}.leftFootBottom { position: absolute; top: -30px;left: 3px; width: 120px;height: 60px; border: 4px solid #000; border-top-left-radius: 50% 44%;border-top-right-radius: 50% 44%;border-bottom-left-radius: 50% 56%; border-bottom-right-radius: 50% 56%; background: #FF9C00;}/* QQ footerWrapper -> right */.rightFootTopWrapper { /* 定位左腳上容器 */ position: absolute;top: 22px;left: 134px; width: 130px; height: 38px; /* border: 1px solid #000; */ overflow: hidden;}.rightFootTop { position: absolute; top: 0px;left: 4px; width: 120px;height: 60px; border: 4px solid black; border-top-right-radius: 32% 65%; background: #FF9C00;}.rightFootBottomWrapper { position: absolute; top: 52px;left: 134px;width: 134px; height: 38px; /* border: 1px solid #000; */ overflow: hidden;}.rightFootBottom { position: absolute; top: -30px;left: 3px; width: 120px;height: 60px; border: 4px solid #000; border-top-left-radius: 50% 56%;border-top-right-radius: 50% 56%;border-bottom-left-radius: 50% 44%; border-bottom-right-radius: 50% 44%; background: #FF9C00;}

到了這裡基本完成了 90% 了， 剩下的就是線條優化，使 QQ 看起來更有層次感、立體感。

嘴唇

嘴巴的形狀不夠性感、立體；繪製一個斜邊三角形，修復嘴唇的層次感。

繪製這樣一個斜邊三角形，步驟分解如圖所示：

先是繪製一個普通三角形，通過逆時針旋轉得到一個修復三角形，那麼相對稱的修復三角形可以通過使用rotateY，繞著Y軸旋轉180度，來得到。

 
  
 
 
/* 嘴唇上下層次感-咬合部位 */.lispContainer { /* 定位 */ position: absolute;top: 146px;left: 60px; width: 116px; height: 24px;}.lips { position: absolute;top: 0;left: 0; width: 116px; height: 24px; border: 1px solid #FFA600; border-bottom-left-radius: 50% 100%; border-bottom-right-radius: 50% 100%; background: #FFA600;}.lipShadow { position: absolute; width: 0px; height: 0px; border-top: 20px solid transparent;border-bottom: 20px solid transparent;border-right: 8px solid black;transform-origin: top right; transform: rotate(-60deg); z-index: 2;}.lipShadow.left { top: 4px; left: -12px; transform: rotate(-60deg);}.lipShadow.right { top: 4px; left: 111px; transform: rotate(60deg) rotateY(180deg);}

圍巾

圍脖竟然沒摺痕，不立體； 通過繪製一個“小尾巴”來進行美化

border-right: 6px solid black;width: 100px;height: 70px;border-bottom-right-radius: 70px 70px;

當對一個角應用圓角樣式，如果這個角相鄰的兩個border一個有定義而一個無定義，那麼繪製的結果就是由粗到細的“小尾巴了”。[在整個繪製過程中，同一個圖形它的繪製方法有很多種，例如一個矩形可以用 width x height構成，也可以由border x height(width)構成，甚至可以由border組合(width = height = 0)構成，根據情況選擇吧。]