# CSS SECRETS 筆記 - Ch2 背景和邊框
###### tags: `CSS SECRETS` `css`
[竹白記事本](https://chupainotebook.blogspot.com/)，學習紀錄，2019/03/15。
>[CSS Secrets](https://www.oreilly.com/library/view/css-secrets/9781449372736/?utm_medium=referral&utm_campaign=publisher&utm_source=oreilly&utm_content=buybox)
[CSS 秘密花園](https://www.w3cplus.com/blog/tags/502.html)
## [目錄 CSS SECRETS 筆記](https://hackmd.io/s/HyrK1S1YN)
Ch2 背景和邊框
1. [半透明邊框](#2-1-半透明邊框)
2. [多邊框](#2-2-多邊框)
3. [彈性背景定位](#2-3-彈性背景定位)
4. [內圓角](#2-4-內圓角)
5. [條紋背景](#2-5-條紋背景)
6. [複雜的背景圖案](#2-6-複雜背景圖案)
7. [（擬似）隨機背景](#2-7-（擬似）隨機背景)
8. [連續的圖片邊框](#2-8-連續的圖片邊框)
---
## 2-1 半透明邊框
背景預設會延伸到邊框底部，要解決這一問題，可以使用 [`background-clip: padding-box;`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip) 修正問題。
<iframe height="300" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-1" src="//codepen.io/chupai/embed/YJxzXw/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/YJxzXw/'>CSS SECRETS 2-1</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
---
## 2-2 多邊框
[`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) 與 [`outline`](https://developer.mozilla.org/en-US/docs/Web/CSS/outline) 解法。
<iframe height="500" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-2 多邊框" src="//codepen.io/chupai/embed/qJPBPW/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/qJPBPW/'>CSS SECRETS 2-2 多邊框</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 2-3 彈性背景定位
解決背景圖片與測邊的距離。
1. 使用 [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)
```css
/* 圖像和邊緣之間沒有間隔 */
background-position: right bottom;
/* 加上偏移量 */
background-position: right 10px bottom 10px;
```
2. 使用 `padding` + [`background-origin: content-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin)
```css
/* 內距沒作用 */
padding: 10px;
box-sizing: border-box;
background-position: right bottom;
/* 加上 background-origin */
background-origin: content-box;
```
3. 使用 [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) + [`calc()`](https://developer.mozilla.org/en-US/docs/Web/CSS/calc)
```css
/* 使用 calc */
background-position: calc(100% - 10px) calc(100% - 10px);
```
<iframe height="600" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-3 彈性背景定位" src="//codepen.io/chupai/embed/aRLJOO/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/aRLJOO/'>CSS SECRETS 2-3 彈性背景定位</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 2-4 內圓角
有些時候，我們只希望容器的內部邊框是圓角的，但是外部輪廓線要是矩形的，只使用一層就實現這種效果。
```css
width: 200px;
height: 150px;
background: #DFEC66;
border-radius: 25px;
padding: 1em;
box-shadow: 0 0 0 10px #24BFA7;
outline: 10px solid #24BFA7;
```
<iframe height="320" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-4 內圓角" src="//codepen.io/chupai/embed/bmoWbP/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/bmoWbP/'>CSS SECRETS 2-4 內圓角</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
:::danger
此方法若圓角半徑太大，陰影將無法覆蓋全部的顏色，而且會超出邊框。
:::
## 2-5 條紋背景
運用 [`background: linear-gradient()`](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)、[`repeating-linear-gradient`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient) 直接在 CSS 中創建紋理。
### 1. 水平紋理
```scss
background: linear-gradient($color1 50%, $color2 50%);
background-size: 100% 30px;
```
>**Codepen 範例：**[CSS SECRETS 2-5 水平紋理](https://codepen.io/chupai/pen/jeGaNm?editors=1100)
### 2. 垂直紋理
```scss
background: linear-gradient(90deg, $color1 50%, $color2 0%);
background-size: 30px 100%;
```
>**Codepen 範例：**[CSS SECRETS 2-5 垂直紋理](https://codepen.io/chupai/pen/ReLQBm?editors=1100)
### 3. 斜纹
使用 `linear-gradient`
```scss
background: linear-gradient(45deg,
$color1 25%, $color2 0,
$color2 50%, $color1 0,
$color1 75%, $color2 0);
background-size: 42.426406871px 42.426406871px;
// 使用畢氏定理 計算雙邊為 15px 的斜長
```
使用 `repeating-linear-gradient`
```scss
background: repeating-linear-gradient(45deg,
$color1 0px, $color1 15px,
$color2 0px, $color2 30px);
```
>**Codepen 範例：**[CSS SECRETS 2-5 斜纹](https://codepen.io/chupai/pen/YJrLKp?editors=1100)
## 2-6 複雜背景圖案
使用 `linear-gradient` 來製作圖樣，創建簡單且實用的圖案。
### 網格
```css
/*網格1*/
background: white;
background-image:
linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
background-size: 30px 30px;
/*網格2*/
background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
/*網格3*/
background: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px,
15px 15px, 15px 15px;
```
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-6 網格" src="//codepen.io/chupai/embed/ZqXRpB/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/ZqXRpB/'>CSS SECRETS 2-6 網格</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### 波爾卡圓點
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-6 波爾卡圓點" src="//codepen.io/chupai/embed/vVeryV/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/vVeryV/'>CSS SECRETS 2-6 波爾卡圓點</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### 棋盤格
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-6 棋盤格" src="//codepen.io/chupai/embed/jeGKBb/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/jeGKBb/'>CSS SECRETS 2-6 棋盤格</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### 其他圖案
>[CSS3 Patterns Gallery](https://leaverou.github.io/css3patterns/)
### SVG 圖案
使用 `linear-gradient` 來製作圖樣，基本上程式碼會過於長且重複，最佳的方法還是使用 SVG 比較好。
>[SVG 圖案](https://philiprogers.com/svgpatterns/#greenstripes)
### 圓錐漸層
>[CSS Conic Gradient](https://css-tricks.com/snippets/css/css-conic-gradient/)
```css
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
```
<iframe height="330" style="width: 100%;" scrolling="no" title="CSS Conic Gradient" src="//codepen.io/chupai/embed/JzpWzp/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/JzpWzp/'>CSS Conic Gradient</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### 結合混合模式的圖案
>[Bennettfeely gradients](https://bennettfeely.com/gradients/)
---
## 2.7 （擬似）隨機背景
>[Cicada Principle and CSS](https://css-tricks.com/cicada-principle-css/)
此技巧稱為 Cicada Principle（蟬原則），可用來繪製隨機多背景、隨機圓角等等效果。
```css
background-color: #026873;
background-image:
linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
```
使用 4 個漸變色，將每個顏色透明度以及區域範圍都設為不相同，然後最終的隨機效果，`background-size` 屬性，其對應的 4 個尺寸值 `13px, 29px, 37px, 53px` 全部都是質數，來確保最大尺寸，重複的接縫可以比任何解析度的螢幕大。
<iframe height="265" style="width: 100%;" scrolling="no" title="隨機背景" src="//codepen.io/chupai/embed/KEQmxX/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/KEQmxX/'>隨機背景</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
---
## 2-8 連續的圖片邊框
將一些圖案或圖片添加為邊框，而不是背景。
```css
.box2 {
width: 200px;
padding: 10px;
border: 10px solid transparent;
background: linear-gradient(white, white), url($img);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
}
```
- 白色內容設定為 `background-clip: padding-box`
- 邊框部分為 `background-clip: border-box`
- `background-origin` 修正為 `border-box`
<iframe height="400" style="width: 100%;" scrolling="no" title="CSS SECRETS 2-8 連續的圖片邊框" src="//codepen.io/chupai/embed/aMqKqa/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/aMqKqa/'>CSS SECRETS 2-8 連續的圖片邊框</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
Sign in with Wallet
Connect another wallet