CSS SECRETS 筆記 - Ch2 背景和邊框

tags: CSS SECRETS css

竹白記事本，學習紀錄，2019/03/15。

CSS Secrets
CSS 秘密花園

目錄 CSS SECRETS 筆記

Ch2 背景和邊框

1. 半透明邊框
2. 多邊框
3. 彈性背景定位
4. 內圓角
5. 條紋背景
6. 複雜的背景圖案
7. （擬似）隨機背景
8. 連續的圖片邊框

---

2-1 半透明邊框

背景預設會延伸到邊框底部，要解決這一問題，可以使用 background-clip: padding-box; 修正問題。

---

2-2 多邊框

box-shadow 與 outline 解法。

2-3 彈性背景定位

解決背景圖片與測邊的距離。

1. 使用 background-position

/* 圖像和邊緣之間沒有間隔 */
background-position: right bottom;

/* 加上偏移量 */
background-position: right 10px bottom 10px;

2. 使用 padding + background-origin: content-box

/* 內距沒作用 */
padding: 10px;
box-sizing: border-box;
background-position: right bottom;
  
/* 加上 background-origin */
background-origin: content-box;

3. 使用 background-position + calc()

/* 使用 calc */
background-position: calc(100% - 10px) calc(100% - 10px);

2-4 內圓角

有些時候，我們只希望容器的內部邊框是圓角的，但是外部輪廓線要是矩形的，只使用一層就實現這種效果。

width: 200px;
height: 150px;
background: #DFEC66;
border-radius: 25px;
padding: 1em;
box-shadow: 0 0 0 10px #24BFA7;
outline: 10px solid #24BFA7;

此方法若圓角半徑太大，陰影將無法覆蓋全部的顏色，而且會超出邊框。

2-5 條紋背景

運用 background: linear-gradient()、repeating-linear-gradient 直接在 CSS 中創建紋理。

1. 水平紋理

background: linear-gradient($color1 50%, $color2 50%);
background-size: 100% 30px;

Codepen 範例：CSS SECRETS 2-5 水平紋理

2. 垂直紋理

background: linear-gradient(90deg, $color1 50%, $color2 0%);
background-size: 30px 100%;

Codepen 範例：CSS SECRETS 2-5 垂直紋理

3. 斜纹

使用 linear-gradient

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

background: repeating-linear-gradient(45deg,
          $color1 0px, $color1 15px,
          $color2 0px, $color2 30px);

Codepen 範例：CSS SECRETS 2-5 斜纹

2-6 複雜背景圖案

使用 linear-gradient 來製作圖樣，創建簡單且實用的圖案。

網格

/*網格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; 

波爾卡圓點

棋盤格

其他圖案

CSS3 Patterns Gallery

SVG 圖案

使用 linear-gradient 來製作圖樣，基本上程式碼會過於長且重複，最佳的方法還是使用 SVG 比較好。

SVG 圖案

圓錐漸層

CSS Conic Gradient

background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

結合混合模式的圖案

Bennettfeely gradients

---

2.7 （擬似）隨機背景

Cicada Principle and CSS

此技巧稱為 Cicada Principle（蟬原則），可用來繪製隨機多背景、隨機圓角等等效果。

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 全部都是質數，來確保最大尺寸，重複的接縫可以比任何解析度的螢幕大。

---

2-8 連續的圖片邊框

將一些圖案或圖片添加為邊框，而不是背景。

.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