css揭祕筆記——背景與邊框

背景與邊框

半透明邊框

知識點

background-clip: [border-box] |[padding-box] | [content-box];

hsla(<色相>, <飽和度>, <明度>, <透明度>)
色相：0~360
飽和度：0%~1000% (0的時候也要加%！！！否則會出錯)
明度： 0%（黑色）~100%（白色）
透明度：0~1

#### 難題：
正常狀況下，想要達到半透明邊框的效果，使用

border: 10px solid hsla(0,0%,100%,.5);
background: white;

這種方式不行，由於背景色延伸到border下面，半透明的邊框反映的仍是背景色。

#### 解決方案：

border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip:padding-box;

這樣就使背景只延伸到padding邊沿。
半透明邊框效果圖

多重邊框

知識點

box-shadow:none|| inset && [<x-offset> <y-offset> <blur-radius> <spread-radius> <color>];

outline: <width> <style> <color>;

outline-offset

#### 解決方案1

border-radius:20px;
box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            5px 5px 10px 15px rgba(0,0,0,.5);
background:yellowgreen;

效果以下圖：

注意：

1. 投影不佔據空間，會和相鄰元素疊加，也不會影響box-sizing屬性；
2. 貼合圓角，設置可border-radius，會自動變成相應圓角；
3. 不會響應鼠標事件，除非使用inset關鍵字，使投影繪製在邊框內。

解決方案2

border:10px solid #655;
outline: 5px solid deeppink;

這種加描邊的方法只能繪製出兩層邊框的效果。
另外，添加outline-offset還有另外的效果：

border-radius:10px;
outline:2px dashed white;
outline-offset:-15px;
background:black;

注意：

1. 描邊也不佔據空間；
2. outline不能接受逗號分隔的多個值；
3. 描邊不能貼合圓角；
4. 不一樣瀏覽器效果可能不同。

靈活的背景定位

知識點

background-position擴展語法
background-origin：padding-box(默認值)|content-box|border-box
(背景圖片的區域)

#### background-clip、background-origin和background-position的區別

這三個屬性都和背景的位置有關，可是是有區別的。
首先，background-clip是針對背景顏色和圖片的；而background-origin和background-position僅指背景圖片。
background-clip 設置元素的背景是否延伸到邊框下面。值爲border-box（默認值）、padding-box和content-box。
background-origin指定背景圖片的原點位置。值爲border-box、padding-box（默認值）、content-box。

border: 1.5em solid transparent; 
background: url(./image/1001-1.jpg);
background-size: cover;
background-clip: border-box;
background-origin: padding-box; /*這是默認值*/

背景圖片延伸到邊框，可是圖片的起始位置是從padding開始的。

將background-origin改成border-box：

這時，背景延時到邊框下，而且圖片的起始位置是border。

另外，background-position是在background-origin設置的圖片起始位置的基礎上的偏移量。

background-origin: border-box;
background-position:50px 50px;

background-origin: padding-box;
background-position:50px 50px;

偏移差異很明顯吧~

問題1

是背景圖片定位在右下角，據底部和右邊20px，且容器大小不固定.

解決方案1

一種方法是：

background:url(./image/heart.png) no-repeat deepskyblue;
background-position: right 20px bottom 20px;

在偏移量前面指定關鍵字。
另外一種方法是：

background:url(./image/heart.png) no-repeat deepskyblue;
background-position: calc(100%-20px) calc(100%-20px);

效果以下：

問題2

背景圖片在padding內側，若按方案1的方法，padding改變，background-position的值也得改，這樣就不是很好了。

解決方案2

padding: 20px; 
background: url(./image/heart.png) no-repeat deepskyblue bottom right;/*或 100% 100%*/
background-origin: content-box;

### 邊框內圓角
不使用兩個嵌套的div，要實現這樣的效果：

background: tan; 
border-radius:.8em; 
box-shadow:0 0 0 .4em #655; 
outline: .7em solid #655;

注意大小寬度：(√2 -1)*border-radius < 擴張半徑 < outline-width

條紋背景

漸變背景

background:linear-gradient(goldenrod,steelblue);/*至關於goldenrod 0%,steelblue 100%*/

background: linear-gradient(goldenrod 20%,steelblue 80%)

條紋背景

background: linear-gradient(goldenrod 50%,steelblue 0); /至關於goldenrod 50%,steelblue 50%*/

background: linear-gradient(goldenrod 50%,steelblue 0); 
background-size:100% 30px;

background: linear-gradient(goldenrod 30%,steelblue 0); 
background-size:100% 30px;

background: linear-gradient(goldenrod 33.33%, steelblue 0, steelblue 66.66%, yellowgreen 0); 
background-size:100% 45px;

background: linear-gradient(to right, goldenrod 50%,steelblue 50%); 
background-size:30px 100%;

background: linear-gradient(45deg, goldenrod 50%,steelblue 50%); 
background-size:30px 30px;

background: linear-gradient(45deg, goldenrod 25%,steelblue 0, steelblue 50%,goldenrod 0, goldenrod 75%,steelblue 0); 
background-size:30px 30px;

/*上個因爲切片是30*30的，因此條紋的寬度是小於15px的，要想使條紋寬度是15，就得勾股定理計算了，這裏42取了約數*/
background: linear-gradient(45deg, goldenrod 25%,steelblue 0, steelblue 50%,goldenrod 0, goldenrod 75%,steelblue 0); 
background-size:42px 42px;

敲黑板，劃重點！！！
linear-gradient() 和 radial-gradient() 各有一個循環式的增強版： repeating-linear-gradient() 和 repeating-radical-gradient()

background: repeating-linear-gradient(45deg, goldenrod,steelblue 30px);

background: repeating-linear-gradient(45deg, goldenrod, goldenrod 15px,steelblue 0, steelblue 30px);
/*斜45度寬15px的斜條紋*/

/*不須要計算，斜任何度數的條紋實現*/
background: repeating-linear-gradient(60deg, goldenrod, goldenrod 15px,steelblue 0, steelblue 30px);

書上說，最好用前面那種方式（貼片+百分比）實現水平垂直的條紋，用repeat的方式實現斜條紋；45度的斜條紋二者結合的方式。

靈活的同色繫條紋

代碼一：

background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

代碼二：

background: #58a; 
background-image: repeating-linear-gradient(30deg, hsla(0, 80%, 90%, .2), hsla(0, 80%, 90%, .2) 15px, transparent 0, transparent 30px);

以上兩段代碼實現了同一個效果：

第二段代碼的好處：

1. 更加DRY，只修改一處就能夠改變全部顏色；
2. 體現了兩個條紋色的關係；
3. 背景色起到了回退做用。

複雜的背景圖案

網格

background: white; 
background-image: 
    linear-gradient(rgba(200,0,0,.5) 50%, transparent 0), 
    linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0); 
background-size: 30px 30px;

background: cornflowerblue; 
background-image: 
    linear-gradient(white 1px, transparent 0), 
    linear-gradient(90deg, white 1px, transparent 0); 
background-size: 30px 30px;

background: cornflowerblue; 
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;

波點

background: saddlebrown; 
background-image: radial-gradient(tan 20%, transparent 0); 
background-size: 30px 30px;

background: saddlebrown; 
background-image: 
    radial-gradient(tan 20%, transparent 0),
    radial-gradient(tan 20%, transparent 0); 
background-size: 30px 30px; 
background-position:0 0, 15px 15px;

提示：可使用預處理器的mixin來簡化代碼。

棋盤

step1

background: lightgray; 
background-image: 
    linear-gradient(45deg, darkgray 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, darkgray 0); 
background-size: 30px 30px;

代碼還能夠簡化爲：

background: lightgray; 
background-image: 
    linear-gradient(45deg, darkgray 25%, transparent 0, transparent 75%, darkgray 0); 
background-size: 30px 30px;

step2

background: lightgray; 
background-image: 
    linear-gradient(45deg, darkgray 25%, transparent 0, transparent 75%, darkgray 0),
    linear-gradient(45deg, darkred 25%, transparent 0, transparent 75%, darkred 0); 
background-size: 30px 30px;
background-position:0 0,15px 15px;

顏色統一以後，就是棋盤了

固然，使用預處理器的mixin來進一步簡化代碼就更好了。
固然，使用svg代碼更簡潔。

僞隨機背景

background: beige; 
background-image: 
    linear-gradient(90deg, orange 11px, transparent 0), 
    linear-gradient(90deg, yellowgreen 23px, transparent 0), 
    linear-gradient(90deg, sienna 41px, transparent 0); 
background-size: 41px 100%, 61px 100%, 83px 100%;

四種顏色的條紋實現的隨機條紋背景，注意點

1. 以一種顏色當作背景，另外三種當作條紋。
2. 以不一樣尺寸的漸變貼片疊加。
3. 切片以不一樣間距重複數次以後統一對齊的地方是這些間距的最小公倍數，而質數之間的最小公倍數是它們的乘積，這樣也是最大的，因此間距應該用質數。

連續的圖像邊框

圖像邊框，可使用border-image屬性，可是它的九宮格伸縮法的原理致使了這種邊框不能成爲連續的圖像。

可使用背景圖片加前置的純色背景來實現。

padding: 1em; 
border:1.5em solid transparent; 
background:
    linear-gradient(white, white), 
    url(./image/1001-1.jpg);
background-clip:padding-box, border-box;
background-size: cover;
background-origin: border-box;

更改元素寬高，邊框依然是連續的。

老式信封

border: 1em solid transparent;
padding: 1em;
background: 
    linear-gradient(white, white), 
    repeating-linear-gradient(-45deg, red 0, red 15px,transparent 0, transparent 30px, blue 0, blue 45px, transparent 0, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;

代碼可簡化爲：

border: 1em solid transparent;
padding: 1em;
background:
    linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, red 0, red 12.5%,transparent 0, transparent 25%, blue 0, blue 37.5%, transparent 0, transparent 50%) 0/ 5em 5em;

這樣，經過background-size就能夠改變條紋的寬度，經過border改變邊框的寬度。
注意：0/5em 5em 表示background-position和background-size，在background中一旦出現background-size，前面就必須是background-position，且用/分開。

還能夠用border-image來實現：

border: 1em solid transparent;
padding: 1em;
border-image:
16 repeating-linear-gradient(-45deg, red 0, red 1em,transparent 0, transparent 2em, blue 0, blue 3em, transparent 0, transparent 4em);

可是這樣尺寸有變，修改的地方就會不少。

螞蟻行軍
（僞裝圖片是動態的）

@keyframes ants { to {background-position: 100%} }

  .marching-ants{
    border: 1px solid transparent;
    padding: 1em;
    background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
    animation: ants 12s linear infinite;
  }

腳註

border-top: .2em solid transparent;
border-image:100% 0 0  linear-gradient(90deg, currentColor 4em, transparent 0);

[1]: /img/bVXHvz