第2章：背景與邊框
1.半透明邊框
- 背景知識(shí)：RGBA/HSLA顏色
-給一個(gè)容器設(shè)置白色背景和一道半透明白色邊框，body的背景會(huì)從他的半透明框上透上去
background:white;
border: 10px solid hsla(0,0,100%,0.5)
結(jié)果卻不是我們想要的。為什么呢
因?yàn)楸尘吧珴B透到邊框下的區(qū)域了。需要更改一下默認(rèn)值（默認(rèn)是border-box）
background:white;
border: 10px solid hsla(0,0,100%,0.5);
background-clip:padding-box;
2. 多重邊框
- box-shadow的基本用法
box-shadow方案
box-shadow方案還能接受第四個(gè)參數(shù)（稱作擴(kuò)張半徑），通過指定正值或者負(fù)值，可以讓投影面積加大或者減少。一個(gè)正確的擴(kuò)展半徑加上倆個(gè)為0的偏移量以及0 的模糊值，得到的投影其實(shí)就像是一道實(shí)線邊框。
background:yellowgreen;
box-shadow:0 0 10px #655;
另外，他還支持逗號(hào)，我們可以創(chuàng)建任何數(shù)量的投影。
background:yellowgreen;
box-shadow:0 0 0 10px #655, 0 0 0 15px deeplink;
唯一需要注意的就是，box-shadow是層層疊加的，第一層投影位于頂層，以此類推。因此你需要按照這個(gè)規(guī)律來調(diào)整擴(kuò)展半徑。
-注意事項(xiàng)：
- 1:投影的行為跟邊框不一致，因?yàn)樗粫?huì)影響布局，而且也不會(huì)收到box-sizing的影響
- 2:上述方法創(chuàng)建的假的邊框出現(xiàn)在元素的外圈。他們并不會(huì)響應(yīng)鼠標(biāo)事件，比如懸?；蛘唿c(diǎn)擊。如果這一點(diǎn)非常重要，你可以給box-shadow屬性加上inset關(guān)鍵字，來使投影繪制在元素的內(nèi)圈，請(qǐng)注意，此時(shí)你需要增加額外的內(nèi)邊距來騰出足夠的空隙。
3:outline方案
在某些情況下，你可能只需要兩層邊框，那就可以先設(shè)置一層常規(guī)邊框，再加上outline（描邊）屬性來產(chǎn)生外層的邊框。這種方式一大優(yōu)點(diǎn)就是在于邊框樣式十分靈活，不像box-shadow只能模擬實(shí)現(xiàn)邊距。（假如我們需要產(chǎn)生虛線邊距效果，box-shadow就沒轍了）如果想得到上圖2-6的效果，代碼可以這樣寫；
background:yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
描邊的另外一個(gè)好處就是你可以通過outline-offset屬性來控制他跟元素邊緣之間的間距，這個(gè)屬性甚至可以接受負(fù)值。
注意事項(xiàng)：
- 他只適用于雙層邊框的場(chǎng)景，因?yàn)閛utline并不能接受逗號(hào)分割的多個(gè)值，如果我們需要獲取更多層的邊框，前一種方案是我們唯一的選擇。
- 邊框不一定會(huì)貼合border-radius屬性產(chǎn)生的圓角，如果此元素是圓角的，他的描邊可能還是直角的（這種行為唄css工作組認(rèn)為是一個(gè)bug，因此未來可能會(huì)改為貼合border-radius圓角）
- 根據(jù)css基本ui特性規(guī)范所述，“描邊可以不是矩形”，但如果你想適應(yīng)這個(gè)方法，請(qǐng)切記最好在不同瀏覽器中完整的測(cè)試最終效果。
3:靈活的背景定位
1: background-position的擴(kuò)展語(yǔ)法方案
background-position已經(jīng)得到擴(kuò)展，它允許我們指定背景圖片距離任意角的偏移量，只要我們?cè)谄屏壳懊嬷付P(guān)鍵字。舉個(gè)例子，如果想讓背景圖片跟右邊距保持20px的偏移量，同時(shí)跟底邊保持10px的偏移量，可以這樣做。
background:url(code-priate.svg) no-repeat #58a;
background-pistion: right 20px bottom 10px;
但是，在不支持background-position擴(kuò)展語(yǔ)法的瀏覽器中，背景圖片會(huì)緊貼左上角，如圖所示。
提供一個(gè)會(huì)退方案，就是把老套的bottom right 定位值寫進(jìn)background的簡(jiǎn)寫屬性中。
background: url(code-private.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
2:background-origin方案
在給背景圖片設(shè)置距離某個(gè)角的偏移量時(shí)候，有一種情況及其常見：偏移量與容器的內(nèi)邊距一致，如果采用上面提到的background-position的擴(kuò)展語(yǔ)法方案，代碼看起來是這樣的：
padding: 10px;
background:url(code-private.svg) no-repeat #58a;
background-position: right 10px bottom 10px;
這樣就可以看到，他雖然起作用了，但是代碼不夠DRY, 每次改動(dòng)內(nèi)邊距的值時(shí)，我們都需要在其他三個(gè)地方更新這個(gè)值。
所以還有一個(gè)更簡(jiǎn)單的辦法實(shí)現(xiàn)這個(gè)需求：
題外話---默認(rèn)情況下，background-position是以padding box 為準(zhǔn)的，這樣邊距才不會(huì)遮住背景圖片，因此top left 默認(rèn)指的就是padding box 的左上角。background-position屬性默認(rèn)值也是padding-box，如果把他的屬性改為content-box，我們?cè)赽ackground-postion屬性中使用的邊角關(guān)鍵字將會(huì)以內(nèi)容區(qū)的邊緣作為基準(zhǔn)（也就是說，此時(shí)背景圖片距離邊角的偏移量就跟內(nèi)邊距保持一致了）
padding: 10px;
backgroung: url("code-private.svg") no-repeat #58a bottom right ; /*或100%100%*/
backgroung-origin: content-box;
他的效果同上。另外如果你想讓偏移量與內(nèi)邊距稍微有些不同，那么可以使用background-origin： content-box的同時(shí)，再通過background-position的擴(kuò)展語(yǔ)法來設(shè)置這些額外的偏移量
3: calc()方案
上述問題我們可以通過這個(gè)函數(shù)輕而易舉的解決：
background:url('code-private.svg') no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px)
注意：兩邊各有一個(gè)空白符
4: 邊框內(nèi)圓角
背景知識(shí)： box-shadow, outline“多重邊框”
要實(shí)現(xiàn)如下效果，我們通常用兩個(gè)元素來實(shí)現(xiàn)
image.png
但是我們?nèi)绻皇褂靡粋€(gè)元素可以達(dá)到嗎？
解決方案
background:tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
5: 條紋背景
- 背景知識(shí)：css線性漸變，background-size
width:100px;
height:100px;
background: linear-gradient(#fb3 40%, #58a 80%);
效果如圖：
如果兩個(gè)距離過近甚至相等，漸變就會(huì)越來越小。直至沒有。
例如
width:100px;
height:100px;
background: linear-gradient(#fb3 450%, #58a 50%);
i因?yàn)闈u變是一種由代碼生成的圖像，所以我們可以像對(duì)待其他背景一樣的方式對(duì)待他們，而且還可以通過background-size來調(diào)整他的尺寸。
background: linear-gradient(#fb3 50%, #58a 50%);
width: 100px;
height: 100px;
background-size: 100% 20px;
效果如下：
由于背景方式默認(rèn)是重復(fù)的，所以效果如上圖，如果要?jiǎng)?chuàng)建不等寬的條紋，只需要調(diào)整色標(biāo)的位置值即可。
background: linear-gradient(#fb3 30%, #58a 30%);
width: 100px;
height: 100px;
background-size: 100% 30px;
效果圖如下
注意：如果某個(gè)色標(biāo)的位置值比整個(gè)列表中他之前的色標(biāo)的位置值都要小，則該色標(biāo)的位置值將會(huì)被設(shè)置為它前面所有色標(biāo)的位置值的最大值。這意味著，如果我們把第二個(gè)色標(biāo)的位置值設(shè)置為0，那它的位置就總會(huì)被瀏覽器調(diào)整為前一個(gè)色標(biāo)的位置值，這個(gè)結(jié)果正是我們想要的。
background: linear-gradient(#fb3 30%, #58a 0);
width: 100px;
height: 100px;
background-size: 100% 30px;
效果如圖：
如果要?jiǎng)?chuàng)建超過兩種的條紋也是很容易的舉例子
background: linear-gradient(#fb3 30%, #58a 0, #58a 66.6%, yellow 0);
width: 100px;
height: 100px;
background-size: 100% 30px;
如圖：
垂直條紋
和水平條紋代碼基本一致，差別在于我們需要在開頭添加一個(gè)額外參數(shù)來指定漸變的方向。
background: linear-gradient(to right, #fb3 30%, #58a 0, #58a 66.6%, yellow 0);
width: 100px;
height: 100px;
background-size: 30px 100%;
效果如下：
斜向條紋
background: linear-gradient(45deg, #fb3 30%, #58a 0, #58a 66.6%, yellow 0);
width: 100px;
height: 100px;
background-size: 30px 30px;
結(jié)果如圖，并不是我們想要的效果：
為什么，因?yàn)楸尘笆侵貜?fù)的，相當(dāng)于我們把每一個(gè)貼片的內(nèi)部漸變旋轉(zhuǎn)了45度，而不是把整個(gè)重復(fù)的背景都旋轉(zhuǎn)了。
思考一下，一個(gè)小貼片中包含了四種顏色，如下圖
只有這樣才能做到無縫貼合。
因此代碼需要更改為如下代碼：
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
width: 100px;
height: 100px;
background-size: 30px 30px;
如圖：
根據(jù)勾股定理，如果想要產(chǎn)生等寬的漸變效果，需要做如下計(jì)算
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
width: 100px;
height: 100px;
background-size: 42.42px 42.42px;
更好的斜向條紋
做一個(gè)對(duì)比，上述斜條紋可以通過如下代碼進(jìn)行實(shí)現(xiàn)
width: 100px;
height: 100px;
background-size: 42.42px 42.42px;
background: repeating-linear-gradient(45deg, #fb3 0, #fb3 14px, #58a 0, #58a 28px)
效果如下：
這種方式的好處就是修改顏色時(shí)候只需要修改兩處而不是原來的三處，最大的好處就是可以隨意指定角度了。需要注意的是，這里在創(chuàng)建雙條紋時(shí)候，仍然需要指定四個(gè)色標(biāo)值，意味著我們最好用前面的方法實(shí)現(xiàn)水平或者垂直條紋，而用這種方式來實(shí)現(xiàn)斜條紋。
靈活的同色系條紋
日常應(yīng)用中，我們想要的條紋圖案并不是由差異極大的幾種顏色組成的，這些顏色往往屬于同一個(gè)色系。只是在明度方面有著輕微的差異，這樣在實(shí)際應(yīng)用中對(duì)于這樣的案例，可以通過代碼體現(xiàn)出主色調(diào)和副色調(diào)之間的關(guān)系還可以在修改時(shí)候只用修改一處。代碼如下
width: 100px;
height: 100px;
background-size: 42.42px 42.42px;
background: #58a;
background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1) 14px, transparent 0, transparent 28px)
效果如下圖：
6:復(fù)雜的背景圖案，
- 漸變知識(shí)：css漸變，條紋背景
7:偽隨機(jī)背景
8:連續(xù)的圖像邊框
9:自適應(yīng)的橢圓
border-radius是用空格分開多個(gè)值，四個(gè)值是從左上角開始以順時(shí)針順序應(yīng)用到元素的各個(gè)拐角。另外他也提供了完全不同的水平和垂直半徑。通過斜扛 / 來區(qū)分的。
四分之一橢圓
- 無非就是一個(gè)角的水平和垂直半徑都需要是100%，而其他三個(gè)角都不能設(shè)置為圓角。
border-radius: 100% 0 0 0 ;
10平行四邊形
-背景知識(shí)：基本的CSS變形
margin: 0 auto;
width: 200px;
height: 200px;
background: #58a;
transform: skewX(45deg)
注意：這個(gè)屬性對(duì)屬性為行內(nèi)的元素是不生效的，所以最好更改為其他的屬性
你會(huì)發(fā)現(xiàn)，文本內(nèi)容也發(fā)生變化了，顯然這是我們不想要的，解決方法如下
1. 嵌套元素方案
- 我們可以對(duì)容器在進(jìn)行一次反向的skew變形，從而抵消容器的變形效果。
2. 偽元素方案
另一種思路就是把所有的樣式（背景，邊框等）應(yīng)用到偽元素上面，然后在對(duì)偽元素進(jìn)行變形
.btn {
position: relative;
background: none;
border: none;
}
.btn::before {
content: '';
position: absolute;
background: #58a;
transform: skewX(45deg);
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
這個(gè)思路適用于其他任何樣式，當(dāng)我們想變形一個(gè)元素而不變形他的內(nèi)容的時(shí)候就可以用到他。
11 菱形圖片
基于變形的方案
<div class="outer">
<div class="inner">菱形文本</div>
</div>
.outer {
margin: 100px auto;
width: 100px;
height: 100px;
border: 1px solid green;
transform: rotate(45deg);
overflow: hidden;
}
.inner {
max-width: 100%;
height: 100%;
background: gray;
transform: rotate(-45deg);
line-height: 100px;
text-align: center;
}
效果如圖：
但是我們想讓圖片的寬度于外框?qū)蔷€的長(zhǎng)度相等，而不是與邊長(zhǎng)相等。這里又要用到勾股定理了。邊長(zhǎng) * 1.414。如果用sale放大1.414倍會(huì)更改合理，因?yàn)閷挾茸儗捠且宰笊辖菫橹行狞c(diǎn)，而scale等默認(rèn)是以中心點(diǎn)進(jìn)行縮放的，前者需要在變換位移，后者不用,所以代碼改為如此，
.outer {
margin: 100px auto;
width: 100px;
height: 100px;
border: 1px solid green;
transform: rotate(45deg);
overflow: hidden;
}
.inner {
max-width: 100%;
height: 100%;
background: gray;
transform: rotate(-45deg) scale(1.42);
line-height: 100px;
text-align: center;
}
效果如下：
裁切路徑方案
上述方法對(duì)圖片寬高有要求，假如圖片不符合要求，上述方案就會(huì)出現(xiàn)bug，可見這種方式是由一種hack處理方式------------不夠簡(jiǎn)潔，不夠直觀，也不夠健壯。
clip-path: polygon(...) // 多邊形
<img class="img" src="https://upload.jianshu.io/admin_banners/web_images/4609/5c252cdb56c9924a035c052cf56753f096a1d6e8.jpg"
alt="">
.img {
width: 200px;
height: 200px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)
}
效果如圖：
還可以參與動(dòng)畫實(shí)現(xiàn)
.img {
width: 200px;
height: 200px;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
.img:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
12. 切角效果
解決方案
- css背景漸變
.third {
width: 100px;
height: 100px;
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0);
margin: 0 auto;
}
效果如圖：
如果想要兩個(gè)角被切掉的效果，最初的想法是這樣的
.third {
width: 100px;
height: 100px;
background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0), linear-gradient(45deg transparent 15px, #655, 0);
margin: 0 auto;
}
發(fā)現(xiàn)行不通，原因：默認(rèn)情況下，這兩層漸變都會(huì)調(diào)填滿整個(gè)元素，因此他們會(huì)相互覆蓋。需要讓他們都縮小一半，于時(shí)我們用background-size來讓每個(gè)漸變只占元素背景的一般
弧形切角
13 梯形標(biāo)簽頁(yè)
生成梯形
.thirteen {
transform: perspective(.5rem) rotateX(5deg);
width: 100px;
height: 100px;
margin: 0 auto;
background: #58a;
}
效果如下
由于這里我們是對(duì)整個(gè)元素進(jìn)行3d變形的，因此上面的文字也是變形的。并且對(duì)元素采用3d變形以后，元素的內(nèi)部變形是“不可逆轉(zhuǎn)”的。所以我們可以采用利用偽類的方式來實(shí)現(xiàn)生成梯形。有些類似于上面的平行四邊形。
.thirteen {
position: relative;
color: white;
padding: 0.5em 1em .35em;
display: inline-block;
}
.thirteen::before {
content: '';
background: #58a;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
position: absolute;
transform: perspective(.5rem) rotateX(5deg);
}
效果如圖
這樣可以實(shí)現(xiàn)，但是有一個(gè)問題，如果我們沒有設(shè)置transform-origin的屬性時(shí)候，應(yīng)用變形效果會(huì)讓這個(gè)元素以自身的中心線為軸進(jìn)行空間上的旋轉(zhuǎn)。因此，元素投射到2d屏幕上的尺寸會(huì)發(fā)生多種變化。
。。。。
14簡(jiǎn)單的餅圖
1:基于transform的解決方案
- 這個(gè)方案在結(jié)構(gòu)上是最佳解決方法：它只需要一個(gè)元素作為選擇器，而其他部分由偽元素/變形元素/和css漸變來實(shí)現(xiàn)。
