# padding color

參考文章:([https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding](https://stackoverflow.com/questions/14628601/can-i-add-background-color-only-for-padding))

以我的例子來說，我用jQuery 畫出 QRcode 會長這樣

![](https://460672175-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lmbdh9OrhI1G9B94HRH%2F-LmbdiNcoUTvtBYgYlVw%2F-LmbdtZPOrfuz3flBNU8%2FQRcode2.jpg?generation=1566180875844933\&alt=media)

假如背景是更深一點，甚至是黑色，會導致 QRcode 不容易被使用者掃描，所以我希望在外圍增加白色邊框。 那個canvas 是jQuery 畫出QRcode 的元素

_style_

```
.QRCODE_pic canvas{
    text-align: center;
    width:36em;
    height:36em;
    padding:1em;
    box-shadow: inset 0 0 0 1em white;
}
```

_jQuery_

```
$("div[data-role=QRCode]").qrcode({ width:512, height:512, text : "123" });
```

_html_

```
<div class="QRCODE_pic" data-role="QRCode"></div>
```

![](https://460672175-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lmbdh9OrhI1G9B94HRH%2F-LmbdiNcoUTvtBYgYlVw%2F-LmbdtZSFdLwVnBNj-xO%2FQRcode.jpg?generation=1566180875837812\&alt=media)

這是我畫出來的效果，希望有幫助囉。
