我還記得國(guó)外某位大牛在一篇文章中寫(xiě)道举户，CSS is fine, it's just really hard。讀完他的那篇文章遍烦，我是不信的俭嘁，CSS會(huì)有多難，不過(guò)就是大量屬性堆疊在一起罷了服猪。然而等我切切實(shí)實(shí)地把寫(xiě)一個(gè)又一個(gè)頁(yè)面的時(shí)候供填，我充分理解到了作者通過(guò)'really hard' 想要表達(dá)的心酸。相比于一門(mén)真正的編程語(yǔ)言（比如JAVA罢猪、JavaScript等）近她，CSS以其復(fù)雜龐大的細(xì)節(jié)深深征服了我。我想我應(yīng)該更加深入具體的去了解它膳帕，以至于更加得心應(yīng)手的使用它粘捎。
《CSS揭秘》是圖靈讀者群里某位小伙伴推薦給我的薇缅，我對(duì)這本書(shū)充滿了期待。
第一章 CSS編碼技巧
盡量減少代碼重復(fù)
1.在實(shí)踐中攒磨，代碼可維護(hù)性的最大要素是盡量減少改動(dòng)時(shí)要編輯的地方泳桦。
2.當(dāng)某些值相互依賴時(shí)，應(yīng)該把它們的相互關(guān)系用代碼表達(dá)出來(lái)娩缰。
3.代碼易維護(hù)和代碼量少不可兼得灸撰。
4.我們還得到了一個(gè)特殊的顏色關(guān)鍵字 currentColor ，它是從SVG 那里借鑒來(lái)的拼坎。這個(gè)關(guān)鍵字并沒(méi)有綁定到一個(gè)固定的顏色值浮毯，而是一直被解析為 color 。實(shí)際上泰鸡，這個(gè)特性讓它成為了 CSS 中有史以來(lái)的第一個(gè)變量 亲轨。雖然功能很有限，但它真的是個(gè)變量鸟顺。
5.inherit 可以用在任何 CSS 屬性中惦蚊，而且它總是綁定到父元素的計(jì)算值（對(duì)偽元素來(lái)說(shuō)，則會(huì)取生成該偽元素的宿主元素）讯嫂。同樣在有時(shí)候?qū)τ谝恍┯糜诓季值脑乜梢允褂?padding來(lái)將元素大小撐開(kāi)蹦锋，而不用顯式地設(shè)置 width和 height。
traingle { position: relative; }
triangle:before{
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;/*這里使用了padding使得元素具有了大小*/
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
相信你的眼睛而不是數(shù)字
人的眼睛并不是一臺(tái)完美的輸入設(shè)備欧芽。有時(shí)候精準(zhǔn)的尺度看起來(lái)并不精準(zhǔn)莉掂，而我們的設(shè)計(jì)需要順應(yīng)這種偏差。舉一個(gè)在視覺(jué)設(shè)計(jì)領(lǐng)域廣為人知的例子吧千扔，我們的眼睛在看到一個(gè)完美垂直居中的物體時(shí)憎妙，會(huì)感覺(jué)它并不居中。實(shí)際上曲楚，我們應(yīng)該把這個(gè)物體從幾何學(xué)的中心點(diǎn)再稍微向上挪一點(diǎn)厘唾，才能取得理想的視覺(jué)效果。來(lái)親身體驗(yàn)一下這件怪事吧（參見(jiàn)圖 1-9）龙誊。
與此類似抚垃，在字體設(shè)計(jì)領(lǐng)域廣為人知的是，圓形的字形（比如 0）矩形字形相比趟大，需要稍微放大一些鹤树，因?yàn)槲覀儍A向于把圓形感知得比其實(shí)際尺寸更小一些。
這些視覺(jué)上的錯(cuò)覺(jué)在任何形式的視覺(jué)設(shè)計(jì)中都普遍存在逊朽，需要我們有針對(duì)性地進(jìn)行調(diào)整罕伯。一個(gè)非常常見(jiàn)的例子是給一個(gè)文本容器設(shè)置內(nèi)邊距。不論內(nèi)容文本有多長(zhǎng)叽讳，是一個(gè)單詞還是幾個(gè)段落追他，這個(gè)問(wèn)題都會(huì)出現(xiàn)熊昌。假如我們給容器的四邊指定相同的內(nèi)邊距，則實(shí)際效果看起來(lái)并不相等湿酸，就像圖 1-11顯示的那樣婿屹。原因在于，字母的形狀在兩端都比較整齊推溃，而頂部和底部則往往參差不齊昂利，從而導(dǎo)致你的眼睛把這些參差不齊的空缺部分感知為多出來(lái)的內(nèi)邊距。因此铁坎，如果我們希望四邊的內(nèi)邊距看起來(lái)是基本一致的蜂奸，就需要減少頂部和底部的內(nèi)邊距。你可以在圖 1-12 中看出這種差異硬萍。
響應(yīng)式設(shè)計(jì)
媒體查詢不能以一種連續(xù)的方式來(lái)修復(fù)問(wèn)題扩所。它們的工作原理基于某幾個(gè)特定的階梯（亦稱“斷點(diǎn)”），如果大部分樣式代碼并不是以彈性的方式來(lái)編寫(xiě)的朴乖，那么媒體查詢能做的只是修補(bǔ)某個(gè)特定分辨率下的特定問(wèn)題——這本質(zhì)上只是把灰塵掃到地毯下面而已祖屏。媒體查詢的斷點(diǎn)不應(yīng)該由具體的設(shè)備來(lái)決定，而應(yīng)該根據(jù)設(shè)計(jì)自身來(lái)決定买羞。
提示
不妨考慮在你的媒體查詢中使用 em 單位取代像素單位袁勺。這能讓文本縮放在必要時(shí)觸發(fā)布局的變化。
一下是對(duì)響應(yīng)式設(shè)計(jì)的一些建議：
1.使用百分比長(zhǎng)度來(lái)取代固定長(zhǎng)度畜普。如果實(shí)在做不到這一點(diǎn)期丰，也應(yīng)該
嘗試使用與視口相關(guān)的單位（ vw 、 vh 吃挑、 vmin 和 vmax ）钝荡，它們的值解
析為視口寬度或高度的百分比。
2.當(dāng)你需要在較大分辨率下得到固定寬度時(shí)舶衬，使用 max-width （會(huì)覆蓋width埠通，同時(shí)本身會(huì)被min-width覆蓋）而不是width ，因?yàn)樗梢赃m應(yīng)較小的分辨率（在較小的分辨率下约炎，使用max-width可以避免出現(xiàn)滾動(dòng)條）植阴，而無(wú)需使用媒體查詢蟹瘾。
3.不要忘記為替換元素（比如 img 圾浅、 object 、 video 憾朴、 iframe 等）設(shè)置一個(gè) max-width 狸捕，值為 100% 。
4.假如背景圖片需要完整地鋪滿一個(gè)容器众雷，不管容器的尺寸如何變化灸拍，background-size: cover 這個(gè)屬性都可以做到做祝。但是，我們也要時(shí)刻牢記——帶寬并不是無(wú)限的鸡岗，因此在移動(dòng)網(wǎng)頁(yè)中通過(guò) CSS 把一張大圖縮小顯示往往是不太明智的混槐。
5.當(dāng)圖片（或其他元素）以行列式進(jìn)行布局時(shí)，讓視口的寬度來(lái)決定列的數(shù)量轩性。彈性盒布局（即 Flexbox）或者 display: inline-block
加上常規(guī)的文本折行行為声登，都可以實(shí)現(xiàn)這一點(diǎn)。
6.在使用多列文本時(shí)揣苏，指定 column-width （列寬）而不是指定
column-count （列數(shù)）悯嗓，這樣它就可以在較小的屏幕上自動(dòng)顯示為單列布局。
總的來(lái)說(shuō)卸察，我們的思路是盡最大努力實(shí)現(xiàn)彈性可伸縮的布局脯厨，并在媒體查詢的各個(gè)斷點(diǎn)區(qū)間內(nèi)指定相應(yīng)的尺寸。
合理使用代碼簡(jiǎn)寫(xiě)
合理使用簡(jiǎn)寫(xiě)是一種良好的防衛(wèi)性編碼方式坑质，可以抵御未來(lái)的風(fēng)險(xiǎn)合武。當(dāng)然，如果我們要明確地去覆蓋某個(gè)具體的展開(kāi)式屬性并保留其他相關(guān)樣式涡扼，那就需要用展開(kāi)式屬性眯杏。
但我們應(yīng)該注意到，在同時(shí)使用簡(jiǎn)寫(xiě)屬性和展開(kāi)式屬性時(shí)壳澳，我們應(yīng)該將簡(jiǎn)寫(xiě)屬性寫(xiě)在展開(kāi)式屬性的前面岂贩，特別是當(dāng)你不確定簡(jiǎn)寫(xiě)屬性是否包含這個(gè)展開(kāi)式屬性的時(shí)候，以防止展開(kāi)式屬性被簡(jiǎn)寫(xiě)屬性覆蓋巷波。
background: url(tr.png) no-repeat top right / 2em 2em,
url(br.png) no-repeat bottom right / 2em 2em,
url(bl.png) no-repeat bottom left / 2em 2em;
其實(shí)我們可以從 CSS 的“列表擴(kuò)散規(guī)則”那里得到好處萎津。它的意思是說(shuō)，如果只為某個(gè)屬性提供一個(gè)值抹镊，那它就會(huì)擴(kuò)散并應(yīng)用到列表中的每一項(xiàng)锉屈。
background: url(tr.png) top right,
url(br.png) bottom right,
url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;
怪異的簡(jiǎn)寫(xiě)語(yǔ)法
你可能已經(jīng)注意到前面那個(gè)背景屬性簡(jiǎn)寫(xiě)的例子了：在 background 簡(jiǎn)寫(xiě)屬性中指定 background-size時(shí)，需要同時(shí)提供一個(gè) background-position 值（哪怕它的值就是其初始值也需要寫(xiě)出來(lái)）垮耳，而且還要使用一個(gè)斜杠（ / ）作為分隔颈渊。為什么有些簡(jiǎn)寫(xiě)的語(yǔ)法如此怪異？
這通常都是為了消除歧義终佛。在這個(gè)例子中俊嗽， top right 顯然是background-position ，而 2em 2em 是background-size 铃彰，不管它們的順序如何绍豁。但是，請(qǐng)?jiān)O(shè)想一下 50% 50% 這樣的值牙捉，它到底是 background-size 還是 background-position 呢竹揍？當(dāng)你在使用展開(kāi)式屬性時(shí)敬飒，CSS 解析器明白你的意圖；而當(dāng)你使用簡(jiǎn)寫(xiě)屬性時(shí)芬位，解析器需要在沒(méi)有屬性名提示的情況下弄清楚 50% 50% 到底指什么无拗。這就是需要引入斜杠的原因。**
我應(yīng)該使用預(yù)處理器嗎昧碉？
在每個(gè)項(xiàng)目開(kāi)始時(shí)使用純 CSS蓝纲，只有當(dāng)代碼開(kāi)始變得無(wú)法保持 DRY 時(shí)，才切換到預(yù)處理器的方案晌纫。為了避免可能發(fā)生的“依賴”或“濫用”税迷，在引入預(yù)處理器的問(wèn)題上需要冷靜決策，不應(yīng)該在每個(gè)項(xiàng)目一開(kāi)始時(shí)就不動(dòng)腦筋順著慣性來(lái)锹漱。
第二章 邊框與背景
半透明邊框
使用 background-clip屬性來(lái)調(diào)整背景的大小箭养，使其不再延伸到邊框的下面。
多重邊框
1.使用多個(gè) box-shadow來(lái)創(chuàng)建多重邊框哥牍，當(dāng)偏移量和模糊量的值均為0的時(shí)候毕泌，設(shè)置第四個(gè)參數(shù)（擴(kuò)張半徑），就可以呈現(xiàn)出如同實(shí)線邊框一樣的“投影”嗅辣。
2.使用 border和 outline來(lái)創(chuàng)建雙層邊框撼泛。但是當(dāng)設(shè)置 border-radius后，outline不能完全貼合 border澡谭，這是一個(gè)bug钙态。
這兩個(gè)解決方案都要注意要預(yù)先預(yù)留出 box-shadow和 outline的位置（增加額外的 margin）嘉冒。如果是 inset的 box-shadow則需要額外的padding辣恋。
靈活的背景定位
很多時(shí)候我們對(duì)容器中的背景圖片進(jìn)行定位時(shí)瞭空，我們可以使用background-position屬性。但是雁仲，當(dāng)容器尺寸不固定時(shí)仔夺，這個(gè)方案就有可能存在很大局限，借助于現(xiàn)代的CSS特性攒砖，我們可以擁有更好的方法缸兔。
1.background-position 擴(kuò)展語(yǔ)法，我們可以在 position偏移量前面指定關(guān)鍵字吹艇。
background: right 20px bottom 10px;
2.首先我們要明白惰蜜，盒模型存在著三個(gè)矩形框（border-box、padding-box掐暮、content-box）蝎抽，那么 background-position是相對(duì)于哪個(gè)矩形框來(lái)說(shuō)的呢？默認(rèn)情況下是以 padding-box為準(zhǔn)的路克，這樣邊框才不會(huì)遮擋住背景樟结。如果我們把 background-origin的值改為 content-box，我們?cè)?background-position屬性中使用的關(guān)鍵字就會(huì)以內(nèi)容框的邊緣為基準(zhǔn)了精算。
padding: 10px;
background-origin: content-box;
3.如果我們想要把圖片定位到距離底邊10px瓢宦，距離右邊20px 的位置。我們以左上角便宜的思路來(lái)考慮灰羽，其實(shí)就是希望有一個(gè)100%-20px的水平偏移量驮履，以及100%-10px的垂直偏移量。
background-position: calc(100% - 20px) calc(100% - 10px);
/*注意減號(hào)左右兩側(cè)需要留一個(gè)空格*/
邊框內(nèi)圓角
有時(shí)候我們可以利用兩個(gè)嵌套的容器來(lái)實(shí)現(xiàn)這個(gè)效果廉嚼，給外部容器設(shè)置一個(gè)外邊距玫镐，內(nèi)部容器設(shè)置一個(gè)圓角。
但是加入我們只利用一個(gè)容器呢怠噪？那我們可以利用容器的 outline和 box-shadow屬性恐似，來(lái)為容器設(shè)置一個(gè) “邊框”。首先我們應(yīng)該知道描邊（outline）并不會(huì)跟著元素的圓角走傍念，但 box-shadow 卻是會(huì)的矫夷。
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
box-shadow在這里實(shí)際上就是為了填滿 outline和圓角之間存在的空隙，所以 box-shadow的擴(kuò)張值不必和 outline的寬度一樣大憋槐，實(shí)際擴(kuò)展值為
x=border-radius
sqrt(x^2+x^2)-x
條紋背景
1.對(duì)于水平條紋和垂直條紋我們使用 background: linear-gradient()屬性值來(lái)創(chuàng)建顏色漸變双藕，以此來(lái)生成條紋。
background: linear-gradient(red 50%,yellow 0);/*默認(rèn)是垂直條紋*/
background: linear-gradient(to right,red 50%,yellow 0);
background: linear-gradient(red 33.3%,yellow 33.3%,yellow 66.6%,blue 100%);
background-size: 100% 30px;
同時(shí)我們也可以生成有一定角度的條紋效果阳仔。
background: linear-gradient(45deg,red 50%,yellow 0);
background-size: 30px 30px;
然而你會(huì)發(fā)現(xiàn)這存在問(wèn)題,這里所設(shè)置的45°偏轉(zhuǎn)并不是相對(duì)于整個(gè)容器來(lái)說(shuō)的忧陪，而是相對(duì)于這里設(shè)置的30px邊長(zhǎng)的小正方形。
因此假如我們需要給容器設(shè)置一個(gè)“偏移”近范，那么比較好的做法就是赤嚼，將兩列拆成四列。
background: linear-gradient(45deg,red 25%,yellow 0,yellow 50%,red 0,red 75%,yellow 0);
background-size: 30px 30px;
這里我們會(huì)發(fā)現(xiàn)這樣確實(shí)達(dá)到了容器“偏移”的效果顺又，但是問(wèn)題是 background-size仍然設(shè)為 30px大小更卒，我們所得到的條紋到底是多寬呢？這個(gè)問(wèn)題應(yīng)該不難稚照，大家可以自行思考蹂空。
2.你可能會(huì)發(fā)現(xiàn)上面所提到的方法只適用于一種情況，那就是45deg果录，一旦我們對(duì)角度的需求更改的話上枕，那么上述辦法就失效了。幸運(yùn)的是弱恒，我們還有更好的辦法來(lái)解決這個(gè)問(wèn)題辨萍。
一個(gè)鮮為人知的真相是：linear-gradient()和 radial-gradient()還各有一個(gè)循環(huán)加強(qiáng)版：repeating-linear-gradient()和 repeating-radial-gradient()。它們的工作方式與前兩類相同，只不過(guò)色標(biāo)是無(wú)限循環(huán)重復(fù)的锈玉，直到顏色鋪滿整個(gè)容器爪飘。
background: repeating-linear-gradient(45deg,red,yellow 15px);
因此，當(dāng)我們將中間的漸變區(qū)域“去掉”（將它設(shè)置為特別欣场）時(shí)师崎，我們發(fā)現(xiàn)
background: repeating-linear-gradient(45deg,red,red 15px,yellow 0,yellow 30px);
3.更加靈活的條紋
很多時(shí)候我們所需要的條紋并不是差異巨大的兩個(gè)不同顏色，而是兩個(gè)色系相同或者相近的顏色椅棺。我們可以采取將深色作為背景犁罩，而把半透明白色條紋覆蓋在上面來(lái)顯示出同色系的條紋效果。
復(fù)雜的背景圖案
1.線性
如果我們把垂直的漸變和水平的漸變以某種規(guī)律重合在一起的話两疚，那么可以設(shè)計(jì)出令人驚訝的效果床估。
甚至我們還可以將兩幅圖案重合起來(lái)。
2.波點(diǎn)
除了線性漸變诱渤，徑向漸變也非常有用丐巫，可以利用徑向漸變來(lái)創(chuàng)建圓和橢圓。
background: red radial-gradient(dan 30%,transparent 0);
background-size: 30px 30px;
但是源哩，這個(gè)圖案看起來(lái)并不十分實(shí)用鞋吉。那么，下面這個(gè)可能讓你大吃一驚励烦。
background: red;
background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
background-position: 0 0,15px 15px;
background-size: 30px 30px;
3.棋盤(pán)
使用直角三角形拼成正方形谓着，一共需要四個(gè)直角三角形。
background: red;
background-image: linear-gradient(45deg,yellow 25%,transparent 0),linear-gradient(45deg,transparent 75%,yellow 0),linear-gradient(45deg,yellow 25%,transparent 0),linear-gradient(45deg,transparent 75%,yellow 0);
background-position: 0 0,15px 15px,15px 15px,30px 0;
background-size: 30px 30px;
當(dāng)然還有更加簡(jiǎn)潔的寫(xiě)法坛掠，那就是把前兩次漸變以及后兩次漸變分別合成一次漸變赊锚。
background: red;
background-image: linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0),linear-gradient(45deg,rgba(0,0,0,0.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,0.25) 0);
background-position: 0 0,15px 15px;
background-size: 30px 30px;
最佳的解決方案還是SVG圖案，對(duì)于棋盤(pán)來(lái)說(shuō)屉栓，在以后有機(jī)會(huì)再學(xué)習(xí)舷蒲。
偽隨機(jī)模型
在上面的背景中你會(huì)輕易的發(fā)現(xiàn)，我們一直是在重復(fù)平鋪幾何圖案友多。其實(shí)自然界中的事物都不是以無(wú)限平鋪的方式存在的牲平。即使重復(fù)，也往往伴隨著多樣性和隨機(jī)性域滥。
我們可以利用“蟬原則”來(lái)創(chuàng)建具有一定隨機(jī)性的背景圖案纵柿。
假設(shè)我們需要模擬四種顏色條紋的隨機(jī)性，那么我們可能想到启绰，把這組條紋拆分成多個(gè)圖層：一種顏色做底色昂儒，另三種顏色作為條紋，然后再讓條紋以不同的顏色進(jìn)行重復(fù)平鋪（對(duì)不同顏色條紋設(shè)置不同的background-size）委可。雖然這可以讓條紋出現(xiàn)局部的隨機(jī)性渊跋，但是一旦平鋪區(qū)間大小超過(guò)三種 background-size的最小公倍數(shù)時(shí)，我們發(fā)現(xiàn)條紋開(kāi)始重復(fù)了。
那么這里為了使得 background-size的最小公倍數(shù)比較大拾酝，在設(shè)置background-size時(shí)燕少，選擇質(zhì)數(shù)會(huì)比較好，因?yàn)橘|(zhì)數(shù)跟其他任意數(shù)字都是相對(duì)質(zhì)數(shù)微宝。
連續(xù)的圖像邊框
如果我們想要把一張圖片應(yīng)用為邊框棺亭，并且還希望這個(gè)元素的尺寸在擴(kuò)大或縮小時(shí)虎眨，這幅圖片都可以自動(dòng)延伸并覆蓋完整的邊框區(qū)域蟋软，那么首先可能想到的是使用 border-image屬性。但是嗽桩，如果我們?cè)敿?xì)了解過(guò) border-image屬性的工作原理后岳守，那么你可能發(fā)現(xiàn) border-image可能難以完成這個(gè)任務(wù)。
border-image是將一張圖片切割成九宮格的形式碌冶，然后將這九個(gè)部分分別對(duì)應(yīng)為盒模型的 border的九個(gè)部分湿痢，這是非常死板的做法，一旦內(nèi)容大小的改變扑庞，會(huì)對(duì)局部產(chǎn)生難以預(yù)期的影響譬重。
一個(gè)非常容易想到的解決方案就是，在內(nèi)容外部設(shè)置一個(gè)較大的容器罐氨，將圖片設(shè)為外部大容器的背景圖片臀规，同時(shí)將內(nèi)容背景設(shè)置為純白色以覆蓋內(nèi)容部分展示出的背景圖片。但這個(gè)做法顯然是不太優(yōu)雅的栅隐，它不僅引入了多余的容器塔嬉，而且并沒(méi)有將結(jié)構(gòu)和表現(xiàn)分離。
1.比較好的做法是租悄，就是利用 background-clip和 background-origin（這里要將 background-origin設(shè)為 border-box）以及白色的線性（這里利用了漸變是作為 background-image二不是作為 color屬性）漸變來(lái)創(chuàng)建這樣一個(gè)容器谨究。但這里要注意到的是，在使用 background簡(jiǎn)寫(xiě)屬性的時(shí)候泣棋，background-origin是在 background-clip屬性前面的胶哲。
2.同樣除了應(yīng)用圖片，單純使用漸變也可以設(shè)計(jì)出善心悅目的邊框（千萬(wàn)不要忽略漸變其實(shí)也是圖片Ｌ侗病）
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,red 0, red 12.5%,transparent 0, transparent 25%,#58a 0, #58a 37.5%,transparent 0, transparent 50%) 0 / 5em 5em;;
使用border-image同樣可以實(shí)現(xiàn)
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,red 0, red 1em,transparent 0, transparent 2em,#58a 0, #58a 3em,transparent 0, transparent 4em);
3.我們可以利用動(dòng)畫(huà)和漸變來(lái)制作一個(gè)螞蟻行軍圖鸯屿。
@keyframes ants{to {background-position: 100% }}
padding: 1em;
border: 1px solid transparent;
background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%) 0/ 0.6em 0.6em;
animation: ants 12s linear infinite;
（這里的動(dòng)畫(huà)是對(duì)于每一個(gè) background-image來(lái)說(shuō)的）
background-position如果只有一個(gè)值被指定，則這個(gè)值就會(huì)默認(rèn)設(shè)置背景圖片位置中的水平方向萎胰，與此同時(shí)垂直方向的默認(rèn)值被設(shè)置成50%碾盟。
我們也可以利用 border-image來(lái)創(chuàng)建一些特殊的邊框，比如頂邊邊框被裁剪的效果
border-top: 0.2em solid transparent;
border-image: 100% 0 0 linear-gradient(to right,currentcolor 4em,transparent 0);
padding-top: 1em;
第三章 形狀
自適應(yīng)的橢圓
我們?nèi)粘?huì)使用 border-radius來(lái)生成圓技竟，比如
background: red;
width: 200px;
height: 200px;
border-radius: 100px;
這里有一個(gè)問(wèn)題冰肴，就是當(dāng)你指定大于100px的半徑的值的時(shí)候，仍然可以生成一個(gè)圓。規(guī)范特別指出了原因
當(dāng)任意兩個(gè)相鄰圓角的半徑之和超過(guò) border box 的尺寸時(shí)熙尉，用戶代理必須按比例減小各個(gè)
邊框半徑所使用的值联逻，直到它們不會(huì)相互重疊為止。
而要得到一個(gè)自適應(yīng)的橢圓也很簡(jiǎn)單检痰，只需要將 border-radius的值設(shè)置為50%包归，這樣不管容器的大小、長(zhǎng)寬都可以生成一個(gè)圓或者橢圓铅歼。
半橢圓
四分之一橢圓
這里我們需要明白 border-raius是一個(gè)簡(jiǎn)寫(xiě)值公壤，那么實(shí)際展開(kāi)值就是 border-top-left-radius、border-top-right-radius椎椰、border-bottom-left-radius厦幅、border-bottom-right-radius四個(gè)值。而如何簡(jiǎn)寫(xiě)這四個(gè)值呢慨飘？如果我們可以向它一次性提供用空格分開(kāi)的多個(gè)值确憨。如果我們傳給它四個(gè)值，這四個(gè)值就會(huì)從左上角開(kāi)始以順時(shí)針順序應(yīng)用到四個(gè)角瓤的，如果我們傳給它三個(gè)值休弃，那么第二和第四個(gè)值相同，如果傳給它兩個(gè)值圈膏，那么第一和第三個(gè)值相同塔猾。同時(shí)，我們甚至可以提供完全不同的垂直和水平半徑本辐。舉例來(lái)說(shuō)桥帆，當(dāng) border-radius的值為 10px/ 5px 20px時(shí)，那么就相當(dāng)于10px 10px 10px 10px/ 5px 20px 5px 20px慎皱。
平行四邊形
假設(shè)我們希望創(chuàng)建一個(gè)平行四邊形的按鈕老虫，那么首先我們可能想到使用2D變形 skew(),但是這會(huì)造成整個(gè)按鈕包括內(nèi)容傾斜，使的內(nèi)容難以辨認(rèn)茫多。但祈匙，如果在內(nèi)容上再嵌套一個(gè)容器，在按鈕 skew()的情況下天揖，對(duì)內(nèi)容容器進(jìn)行相反方向的 skew()就能解決這個(gè)問(wèn)題夺欲。但是這同樣犯了結(jié)構(gòu)沒(méi)有與表現(xiàn)分離的錯(cuò)誤。
這里可以利用偽元素來(lái)實(shí)現(xiàn)這樣一個(gè)效果今膊。我們不對(duì)元素本身進(jìn)行變形些阅，而是對(duì)偽元素進(jìn)行變形。
.button {
position: relative;
/* 其他的文字顏色斑唬、內(nèi)邊距等樣式…… */
}
.button::before {
content: ''; /* 用偽元素來(lái)生成一個(gè)矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}
這里給我的感覺(jué)這并不是一個(gè)好方法市埋，相對(duì)于上面添加額外的容器來(lái)說(shuō)黎泣，操作限制太多，一旦文字內(nèi)容太多（或者字號(hào)太大）超出了偽元素區(qū)域缤谎，看起來(lái)就很不協(xié)調(diào)抒倚。
菱形圖形
日常開(kāi)發(fā)中將圖片裁切為菱形是常見(jiàn)的設(shè)計(jì)手法。
1.基于變換的手法坷澡，就像前一篇提到的托呕，給內(nèi)容增加一個(gè)額外的容器，內(nèi)外進(jìn)行相反的rotate()變換频敛。
<div class="picture">
</div>
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg);
}
但是這并不是我們想要的效果项郊，圖形被裁剪成了一個(gè)八邊形。那么問(wèn)題出在什么地方呢姻政？仔細(xì)觀察我們想要得到的效果呆抑，你就會(huì)發(fā)現(xiàn)岂嗓，我們需要的是圖片的寬度等于容器的對(duì)角線的長(zhǎng)度才行汁展。所以我們需要將圖片放大。將 max-width設(shè)置為1.414倍（應(yīng)該明白1.414怎么來(lái)的厌殉？）食绿，但是還有更好的解決方法，就是 scale()進(jìn)行縮放公罕。
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
2.真正的裁剪路勁方案器紧，你會(huì)發(fā)現(xiàn)上述的方法存在一個(gè)問(wèn)題，就是當(dāng)圖片不是正方形的時(shí)候楼眷，就無(wú)能為力了铲汪。
這里我們要介紹一個(gè)新屬性 clip-path，clip-path借鑒于 SVG語(yǔ)法具有很強(qiáng)的功能性罐柳。
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
同時(shí)我們還可以利用這個(gè)屬性產(chǎn)生動(dòng)畫(huà)
img {
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%);
}
但是這個(gè)功能仍然還在實(shí)驗(yàn)中掌腰。
切角效果
1.解決方案一是利用漸變，設(shè)置一個(gè)45度的漸變就可以了张吉。而如果我們需要切除兩個(gè)角齿梁，使用一個(gè)漸變會(huì)使得相互覆蓋。所以這里就需要將限制漸變的大小肮蛹，使得我們裁切的角不會(huì)被覆蓋勺择。同時(shí)注意到一旦設(shè)置了 background-size，就要注意背景是否會(huì)重復(fù)伦忠。
background: linear-gradient(45deg,white 15px,red 0) left/50% 100% no-repeat,linear-gradient(-45deg,white 15px,red 0) right/50% 100% no-repeat;
上述代碼切割了兩個(gè)底角省核。
如果是需要切割四個(gè)角那么你可以用四層漸變，但還有一個(gè)更好的辦法那就是之前介紹的 clip-path昆码。
background: yellowgreen;
clip-path: polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%);
弧形切角
1.這里仍然使用漸變气忠，不過(guò)是徑向漸變邓深，就可以設(shè)計(jì)出內(nèi)凹圓角的效果了
background: radial-gradient(circle at top left,transparent 15px,red 0) top left,radial-gradient(circle at top right,transparent 15px,red 0) top right,radial-gradient(circle at bottom left,transparent 15px,red 0) bottom left,radial-gradient(circle at bottom right,transparent 15px,red 0) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
2.另一個(gè)比較好的方案就是內(nèi)聯(lián)SVG和 border-image方案，由于我還不會(huì)SVG矢量圖笔刹，所以這里略過(guò)芥备。
3.最后一個(gè)仍然是 clip-path方案，但需要注意的是這是個(gè)仍在試驗(yàn)階段的屬性舌菜。
