標籤製造器1.1


進一步設定標籤內的小框與左側文字   可以設定邊框的上、下、左、右四側的顏色、大小、圓角等屬性。
預設上、下、左、右屬性全部相同。
  加入標籤的背景圖或內框的背景圖    |  不要滑動式調整數字,直接鍵盤輸入數字   即時渲染:改變數值後,即時產生圖片 *反應較慢,需要較高性能
非即時渲染:改變數值後,離開控制項才會產生圖片 *反應較快,建議搭配HTML版的放大預覽使用
   |  如果依然無法滿足需求,可嘗試試進階編輯功能並直接輸入CSS屬性、自訂單位    |  匯入、匯出模板至瀏覽器或JSON文字,方便日後重用  
進階編輯沒有最小、最大數值限制,可輸入自訂單位,有額外功能,僅建議有CSS基礎人士使用。
注意:退出進階編輯,再修改屬性,將會失去自訂單位及超過限額的數字。

文字部份

背景色:
顏色:
文字:
大小:{{text.fontSize}}
字型:
間距:{{text.letterSpacing}}
空白:
水平位移:{{text.marginLeft}}
垂直位移:{{text.marginTop}}
自訂CSS:

標籤部份

顏色:
寬度:{{container.width}}
高度:{{container.height}}
邊框圓角:
{{container.borderRadius}}
左上:  右上:
左下:  右上:
邊框大小:
{{container.borderWidth}}
左:  右:
上:  下:
邊框顏色:
左:
右:
上:
下:
自訂CSS:

左側文字

背景顏色:
文字顏色:
文字:
大小:{{leftBox.fontSize}}
字型:
間距:{{leftBox.letterSpacing}}
空白:
水平位移:{{leftBox.marginLeft}}
垂直位移:{{leftBox.marginTop}}
自訂CSS:

右側文字

背景顏色:
文字顏色:
文字:
大小:{{rightBox.fontSize}}
字型:
間距:{{rightBox.letterSpacing}}
空白:
水平位移:{{rightBox.marginLeft}}
垂直位移:{{rightBox.marginTop}}
自訂CSS:

內框部份

顏色:
留白:
左:  右:
上:  下:
邊框圓角:
{{box.borderRadius}}
左上:  右上:
左下:  右上:
邊框大小:
{{box.borderWidth}}
左:  右:
上:  下:
邊框顏色:
左:
右:
上:
下:
自訂CSS:

標籤背景

圖片:



背景重複:
位置:
大小:

內框背景

圖片:



背景重複:
位置:
大小:

模板

名稱:

JSON

 

 

儲存圖片

原始HTML

各瀏覽器渲染不同,一律以生成圖片為準,請根據圖片進行微調

{{leftBox.content}} {{text.content}} {{rightBox.content}}
放大預覽: {{userConfig.htmlZoomLevel}}
{{leftBox.content}} {{text.content}} {{rightBox.content}}

生成圖片

放大預覽: {{userConfig.zoomLevel}}