《CSS揭祕》讀書筆記

摘要

《CSS揭祕》主要是介紹了使用CSS的技巧，經過47個案例來靈活的使用CSS進行實現，同時在實現過程當中注重CSS代碼的靈活性與健壯性。經過閱讀這本書有利於咱們編寫高質量的CSS代碼以及打破使用CSS時的固定思惟，可以更加靈活的使用CSS。

《CSS揭祕》中的全部案例代碼均上傳到：play.csssecrets.io/。

關於《CSS揭祕》的讀書筆記主要是記錄經過閱讀書中的CSS案例所得到啓發和對CSS樣式新的認知點。

第二章 背景與邊框

background-clip

background-clip屬性設置元素的背景(背景圖片或顏色)覆蓋到什麼位置。
屬性值爲：border-box(默認值) | padding-box | content-box | text
注：text屬性值是設置將背景被裁剪爲文字的前景色(chrome瀏覽器支持須要添加-webkit-前綴；最新版本的火狐瀏覽器 [ 63.0.3 (64 位) ]直接支持background-clip: text 屬性)。

background-origin

background-origin規定了指定背景圖片background-image屬性的原點位置的背景相對區域。
屬性值爲：border-box | padding-box(默認) | content-box

多重邊框

傳統作法：經過多重元素嵌套來生成多重邊框。

新的思路：
方法一：經過box-shadow的第四個參數可讓投影面積增大或者縮小，設置box-shadow: 0 0 0 10px #809;獲得的「投影」其實就像一道實線邊框，而且box-shadow支持逗號分割法，所以咱們能夠建立任意數量的投影。
缺點：邊框的樣式單一，只可以是實線邊框。

方法二：經過outline描邊屬性來設置第二重邊框
缺點：只可以適用於兩重邊框(border一重，outline一重)，而且outline的描邊不可以貼合border-radius的圓角，只可以是矩形。

背景圖片的靈活定位

傳統作法：經過計算元素的大小，設置background-position的位置。

新的思路：
方法一：background-position屬性模式是經過左上角進行定位的，能夠隨機指定距離任意角的偏移量，background-position:left 20px top 30px;

方法二：經過calc()函數來實時計算background-position的位置，background-position: calc(100% - 20px) calc(100% - 30px);

方法三：能夠經過background-origin:content-box,使得background-position之內容區的左上角做爲基準，圖片距離邊角的偏移量等於內邊距。

邊框內圓角(矩形容器，內側有圓角)

傳統作法：經過兩個div嵌套，內部的div設置爲圓角，外部的div保持矩形邊框形狀。

新的思路：outline屬性結合box-shadow屬性。
一、經過outline能夠爲border-radius描邊，可是描邊爲矩形，與圓角以前存在空白縫隙，經過box-shadow能夠填充縫隙。
二、須要填充的縫隙大小爲，圓角半徑爲r，圓心到描邊頂角的距離爲√2 r，所以填充的距離爲（√2 - 1）r
缺點：由於box-shadow的寬度至少須要設置爲（√2 - 1）r，若是描邊的寬度小於這個值，那麼描邊將會被box-shadow遮住。

linear-gradient()

linear-gradient()函數建立一個漸變「圖像」
函數內容爲：linear-gradient(direction, colorItem1,colorItem2...)
一、角度設置是根據時鐘順時針進行計算的；
二、下一個顏色開始位置與上一個顏色的結束位置一致，則不須要填充顏色之間空餘的位置，造成不一樣的顏色條而非過渡條；
三、當後面顏色位置小於前面顏色位置時，瀏覽器之間將後面顏色位置更正爲與前面顏色位置一致。

repeating-linear-gradient()

repeating-linear-gradient()建立一個重複線性漸變的「圖像」
函數內容爲：repeating-linear-gradient(direction, colorItem1,colorItem2...)
每次重複時，色標位置的偏移量都是基準漸變長度（最後一個色標和第一個之間的距離）的倍數，所以要設置開始處（0位置）的顏色。

條紋背景

傳統作法：經過兩種顏色進行設置

新的思路：
方法一：首先經過background-color設置背景色，而後經過background-image:linear-gradient(rgba(0,0,0,0.2) 50%,transparent 50%);以及background-size:auto 2em;建立一個「黑白條」蓋在上面而且高度爲2em(1em表明爲1行)。

background-color:red;
background-image:linear-gradient(rgba(0,0,0,0.2) 50%,transparent 50%);
background-size:auto 2em;
複製代碼

方法二：經過linear-gradient()直接設置兩種顏色，而後設置background-size 大小，根據background直接複製平鋪。

方法三：經過repeating-linear-gradient()直接設置顏色自動重複。

錯落相間的背景圖案

一、經過設置兩個linear-gradient()，而後各自設置其background-position，來使的背景圖案錯落開來。
二、矩形的背景圖案，能夠經過linear-gradient()45deg的建立2個直角三角形拼接而成。

帶有圖案的邊框

傳統作法：經過建立兩個div，外層的div設置背景圖片，內層的div在背景圖片上覆蓋一層白色背景色，兩層之間的差距就造成了圖案邊框。

新的思路：
一、background能夠設置多個背景，可是白色背景色會默認在最底層，沒法上浮到圖片上方，因此白色背景色經過線性漸變來實現，而且將背景圖片的鋪蓋範圍設置爲border-box。
二、background-origin默認值是padding-box，所以圖片默認是放置在padding-box的原點上，而後經過平鋪複製蔓延到border-box，所以border區域的圖片顯示異常，因此要將border-origin設置border-box。

padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
	        url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm);
background-size:cover;
background-clip:padding-box,border-box;
background-origin:border-box;
複製代碼

注：除了圖片以外還能夠經過漸變來實現有規律的邊框圖案。

第三章 形狀

半橢圓/四分之一橢圓/八分之一橢圓

經過border-radius能夠分別設置每一個角的水平和垂直圓形半徑，進而達到對每一個角的變形設置。

平行四邊形

傳統作法：對元素添加skew()屬性進行變形。
缺點：元素的形狀是發生了改變，可是內部的文本和其餘元素也都所有發生了變形。

新的思路：
方法一：經過嵌套元素，外部元素負責形狀的變形，內部元素進行反向變形，使元素恢復正常。若是須要圖片填充變形的形狀，除了對內部圖片進行反向變形外，還須要scale放大，填充滿整個變形圖案。
缺點：須要添加額外的html元素。

方法二：經過添加僞元素，讓僞元素來完成形狀的變形，元素自己不發生變化。
缺點：沒法使圖片填充變形的形狀。

.button {
	position: relative;
	display: inline-block;
}
.button::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0; /* 可以自適應元素大小的變化 */
	z-index: -1; /* 背景顏色不會覆蓋在字體上方 */
	background: #58a;
	transform: skew(45deg);
}
複製代碼

注：以上方法適用於任何咱們想要變形一個元素而不想變形它的內容狀況

菱形圖片

除了使用「平行四邊形」中的方法一來建立一個菱形圖片以外，還可使用clip-path屬性來直接對圖片元素進行裁剪。
缺點：須要提早考慮clip-path屬性的兼容性。

img {
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
複製代碼

切角效果

方法一：
一、切角效果的核心方式就是使用：linear-gradient(45deg, transparent 15px, red 0)；經過漸變來實現一個透明的小角，致使視覺效果像切角了。
二、當對元素進行多個切角時，將背景進行劃分，每塊單獨作切角處理，而後定位每塊的位置，「拼接」成一個背景。

div{
	background: #58a;
	background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
	            linear-gradient(-135deg, transparent 15px, #58a 0) top right,
	            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
	            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
複製代碼

三、要實現弧形切角（內凹圓角）時，只須要將徑向漸變替換線性漸變便可。

div{
	background: #58a;
	background:	radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
	            radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
	            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
	            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
複製代碼

缺點：只能是純色背景。

方法二：經過SVG畫一個切角效果的圖片，而後基於border-image的工做原理，將切角效果應用於border上。

div{
	border: 15px solid transparent;
	border-image: 1 url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\ <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\ </svg>');
	background: #58a;
	background-clip: padding-box;
}
複製代碼

缺點：背景顏色只能是純色或者是邊緣接近純色的背景圖片。

方法三：使用clip-path對元素進行裁剪，裁剪出切角效果，不管你的背景是什麼這種方法都可以適用，可是要注意clip-path屬性的兼容性。

div {
	height:50px;
	background: #58a;
	-webkit-clip-path: 
		polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
		calc(100% - 20px) 100%,
		20px 100%, 0 calc(100% - 20px), 0 20px);
	clip-path:
	 	polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
	 	calc(100% - 20px) 100%,
	 	20px 100%, 0 calc(100% - 20px), 0 20px);
}
複製代碼

梯形圖案

一、經過元素3D旋轉投影成2D的梯形形狀，而後經過scale將元素按照比例放大，彌補由於旋轉形成的高度縮小。
二、經過固定元素的transform-origin，選擇元素的哪幾條邊不須要變化。
三、使用添加僞元素變形方案，由於3D旋轉沒法進行反向變形，所以不採納嵌套元素變形方案。
缺點：同種旋轉角度不一樣的寬度，梯形元素的傾斜角由於寬度緣由會不相同。

div::before {
	content: ''; /* To generate the box */
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: red;
	transform: scaleY(1.5) perspective(.5em) rotateX(5deg);
	transform-origin: bottom; /* 經過設置transform-origin爲bottom left或bottom right能夠獲得左側傾斜和右側傾斜的梯形 */
}
複製代碼

餅狀圖

方法一：
步驟一：
一、經過建立一個陰陽圖，左邊爲餅狀圖默認顏色，右邊爲餅狀圖顯示顏色。
二、0～50%經過建立僞元素(顏色爲默認顏色)，擋住右邊的顯示顏色，經過旋轉(0~0.5turn)，一點點將顯示顏色顯示出來。
三、50%～100%經過建立僞元素(顏色爲顯示顏色)，經過旋轉(0~0.5turn)，一點點覆蓋左邊的默認顏色。
四、經過animation切換僞元素背景色與重置旋轉角度。

.pie {
	width: 100px; height: 100px;
	border-radius: 50%;
	background: yellowgreen;
	background-image: linear-gradient(to right, transparent 50%, currentColor 0);
	color: #655;
}

.pie::before {
	content: '';
	display: block;
	margin-left: 50%;
	height: 100%;
	border-radius: 0 100% 100% 0 / 50%;
	background-color: inherit;
	transform-origin: left;
	animation: spin 3s linear infinite, 
				bg 6s step-end infinite;
}

@keyframes spin {
	to { transform: rotate(.5turn); }
}
@keyframes bg {
	50% { background: currentColor; }
}
複製代碼

步驟二：
一、經過animation-delay將直接跳轉到動畫的指定時間點。

// html
<div class='pie'>50%</div>
// css
.pie {
	display: inline-block;
	position: relative;
	width: 100px;
	line-height: 100px;
	border-radius: 50%;
	background: yellowgreen;
	background-image: linear-gradient(to right, transparent 50%, #655 0);
	color: transparent;
	text-align: center;
}

@keyframes spin {
	to { transform: rotate(.5turn); }
}
@keyframes bg {
	50% { background: #655; }
}

.pie::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	width: 50%; height: 100%;
	border-radius: 0 100% 100% 0 / 50%;
	background-color: inherit;
	transform-origin: left;
	animation: spin 50s linear infinite,
				bg 100s step-end infinite;
	animation-play-state: paused;
	animation-delay: inherit;
}
// js
var _dom = document.querySelector('.pie')
_dom.style.animationDelay = '-' + parseFloat(_dom.textContent) + 's';
複製代碼

方法二：
一、使用SVG中的虛線描邊，將圓形描邊的大小設置爲半徑的2倍，可以徹底覆蓋圓形。
二、設置虛線的間隔爲圓形的周長，可以保證只顯示一塊虛線。
三、設置虛線的長度爲所佔比例，顯示出咱們所須要的餅狀圖。

// html
<svg viewBox='0 0 32 32'>
	<circle r='16' cx='16' cy='16'
</svg>
// css
svg {
	width:100px;
	height:100px;
	background:yellowgreen;
	border-radius:50%;
	transform:rotate(-90deg);
}
circle{
	fill:yellowgreen;
	stroke:#655;
	stroke-width:32; 
	stroke-dasharray:20 100; /* 半徑爲16，會使的周長剛恰好爲100，經過設置虛線長度，直接就可以顯示爲百分比餅狀圖 */
}
複製代碼

總結

經過以上的案例發現，元素的變形主要經過如下幾種方式：
方法一：使用transform變形屬性對元素進行2D/3D變形，而後經過scale方法元素來彌補由於變形所形成的寬高損失。

方法二：使用clip-path屬性直接對元素進行裁剪。

方法三：使用linear-gradient()對元素進行處理。

第四章 視覺效果

單側投影/鄰邊投影/雙側投影

一、box-shadow的第四個參數，稱爲擴張半徑，能夠根據指定的值去擴大或者縮小投影的的尺寸。
二、根據擴張尺寸，投影時若是陰影在別的邊漫出來了，咱們能夠設置擴張尺寸爲負，這樣就可以在保留陰影效果的同時，將其餘邊的陰影縮進去已到達去除陰影的效果。

不規則投影

一、box-shadow的投影沒法做用於僞元素或者半透明的裝飾上(好比虛線中間的縫隙，切角效果)
方法一：使用CSS濾鏡filter屬性的drop-shadow()函數，它能夠爲任何非透明的地方添加上陰影，參數等同於box-shadow可是不支持inset關鍵字和擴張半徑。

div {
	filter:url(drop-shadow.svg#drop-shaodow) // 附上一個SVG濾鏡能夠獲得稍好一點的瀏覽器支持度
	filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}
複製代碼

缺點：drop-shaodow能夠爲任何非透明的地方添加上陰影，所以若是你的背景是透明的，則drop-shadow會爲字體添加上陰影。

圖片染色效果

方法一：在圖片的上層覆蓋一層半透明的純色或者把圖片設爲半透明並覆蓋在一層實色背景之上。
缺點：並非真正的染色效果，而且削弱了圖片的對比度。

方法二：把圖片放置在<canvas>中，並利用腳本對其進行染色處理。

方法三：經過多個filter濾鏡組合對圖片進行處理。

img {
	// 根據需求自由組合濾鏡
	filter: 
		sepia()  // 將圖像轉換爲深褐色
		saturate(4) // 轉換圖像飽和度
		hue-rotate(295deg); // 給圖像應用色相旋轉
}
複製代碼

缺點：當添加動畫將img切換會原圖的效果時，切換效果不是一點點的漸變而是將濾鏡一個個剔除的過渡變化。

方法四：混合模式-mix-blend-mode，只須要把圖片包裹在一個容器中，併爲這個容器的背景色設置爲咱們想要的主色調。

<div>
	<img src='demo.jpg'/>
</div>
div {
	background:rgba(255,0,0,0.5);
}
img {
	mix-blend-mode:luminosity;
}
複製代碼

缺點：要注意屬性的兼容性，混合模式不支持動畫，能夠將容器的背景色設置爲透明來實現正常/染色的切換。

方法五：混合模式-background-blend-mode，只須要使用一個div元素，將第一層背景設置爲要染色的圖片，將第二層背景設置爲咱們想要的主色調。

<div style="background-image:url(demo.jpg)"></div>
div {
	width: 640px; 
	height: 440px;
	background-size: cover;
	background-color: rgba(255,0,0,0.5);
	background-blend-mode: luminosity;
}
複製代碼

缺點：要注意屬性的兼容性，混合模式不支持動畫，能夠將容器的背景色設置爲透明來實現正常/染色的切換。

毛玻璃效果

一、背景圖片之上存在文字，文本層所覆蓋的那部分圖片區域做模糊處理。
方法一： 爲文本層添加一個僞元素，僞元素的設置的背景圖片與以前的背景圖片一致，致使僞元素的背景圖片重疊在原背景圖片上方，而後只須要對僞元素背景圖片作模糊處理就能夠了。

div, .text::before {
	background: url("demo.jpg") 0 / cover fixed;
}

.text {
	position: relative;
	background: hsla(0,0%,100%,.25) border-box; 
	overflow: hidden;
}

.text::before {
	content: '';
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: -30px; // 模糊到文本層邊緣的時候會消失，擴大一圈區域，避免邊緣無模糊。
	z-index: -1;
	-webkit-filter: blur(10px);
	filter: blur(10px);
}
複製代碼

折角效果

一、使用漸變描繪一個空白的折角區域。
二、經過僞元素建立一個折角，經過三角函數來計算折角的大小，經過折角的角度來計算折角旋轉角度和偏移角度，來創造出合乎常理的折角效果。
缺點：只可以對純色背景進行折角效果。

第五章 字體排印

插入換行

傳統作法：經過<br/>標籤來進行換行

新的思路：能夠經過:before或:after僞類選擇器中的content設置爲「\A」來進行換行，由於Unicode字符中表明換行符的爲「0x000A」，在CSS中能夠寫爲「\000A」或者簡化爲「\A」

div::after {
	content: "\A";
	white-space: pre; // 可以保留源代碼中空白和換行符，不然content中的換行符將被忽略。
}
複製代碼

tab-size屬性

在須要展現代碼的網頁上時，經過設置tab-size屬性可以指定一個tab縮進幾個字符。

爲某些字符單獨設置字體

傳統作法：爲須要單獨設置字體的字符設置class，經過class爲它們設置獨特的字體。

新的思路：@font-face中的unicode-range屬性能夠設置字體的適用於哪些字符。

@font-face {
	font-family: demoFont;
	src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'); /* 應用於指定字符的字體 */
	unicode-range: U+26; /* 設置生效字符，'&'的Unicode碼位，能夠經過'&'.chatCodeAt(0).toString(16)獲取'&'的十六進制碼位'26'，而後前面加上'U+'前綴 */
}

p {
	font-family: demoFont, Helvetica; /* demoFont字體只應用於'&'字符，其餘字符會適用後續的字體'Helvetica' */
}
複製代碼

自定義文本下劃線

傳統作法：經過text-decoration:underline;

新的思路：
一、經過background與background-size設置一條自定義格式的下劃線；
二、經過text-shadow可讓字符周圍出現一圈白邊，使的顯示爲下劃線遇到字母的降部自動斷開避讓。
三、文本最好放置在行內元素內，這樣下劃線才能隨這文本的換行也進行換行。

span {
	background: linear-gradient(gray, gray) no-repeat;
	background-size: 100% 1px;
	background-position: 0 1.2em;
	text-shadow: .05em 0 white, -.05em 0 white;
}
複製代碼

空心字效果/文字外發光效果/文字凸起效果

經過text-shadow爲文本添加效果來實現。

環形文字

一、經過SVG的path畫出一個圓形。
二、經過text與textPath添加文本，並經過xlink:href屬性將文本連接到路徑上。

<div class='demo'>
	<svg viewBox='0 0 100 100'>
		<path d='M0,50 a50,50 0 1,1 0,1z' id='circle'></path>
		<text>
			<textPath xlink:href="#circle">fdsfdsfdsfdsfsdfdsfsdfds</textPath>		
		</text>
	</svg>
</div>

.demo {
	width:300px;
	height:300px;
	margin: 4em auto 0;
}
svg{
	display:block;
	overflow: visible;
}
path {
	fill:none;
}
複製代碼

注：這種方法不但適用於環形文字還適用於全部須要特殊路徑排序的文字。

第六章 用戶體驗

擴大用戶交互熱區

方法一：使用透明的border擴大交互熱區。使用background-clip從新定義背景的填充區域。

.demo1 {
	border:20px solid transparent;
	background-clip:padding-box;
	/* 實際border-radius效果值爲border-radius減去border的值 */
	border-radius:25px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset;
}
複製代碼

注：
一、若是要設置border-radius的值時須要注意，實際border-radius效果值爲border-radius減去border的值。
二、若是要設置邊框能夠經過內嵌投影在模擬出一道實色邊框。
缺點：沒法爲元素設置box-shadow陰影效果，由於陰影效果時設置border-box外面的。

方法二：使用一個僞元素，擴大僞元素的範圍，僞元素的範圍也能夠觸發熱區。經過僞元素能夠隨意設置熱區的尺寸、位置、形狀。

.demo2 {
	position:relative;
}
.demo2:before {
	content:'';
	position:absolute;
	top:-10px;
	bottom:-10px;
	left:-10px;
	right:-10px;
}
複製代碼

自定義check樣式

使用label與checkbox進行相關聯，而後將checkbox隱藏起來，最後經過設置label僞元素的樣式來頂替checkbox的樣式。

建立蒙層

傳統作法：建立一個額外HTML元素來設置爲蒙層。

新的思路：
方法一：經過body上的僞元素來設置爲蒙層。
缺點：僞元素沒法綁定獨立的JS事件處理函數以及對於元素的z-index設置可能會出現誤差。

方法二：經過box-shadow來設置蒙層。box-shoadow: 0 0 0 50vmax rgba(0,0,0,.8)
缺點：只能覆蓋當前窗口，頁面若是滾動就會露餡以及沒法阻止用戶與頁面其餘元素交互。

方法三：使用dialog元素backdrop僞元素能夠只能蒙層。
缺點：要考慮backdrop僞元素的兼容性。

彈出窗口背景模糊

實現效果相似毛玻璃效果，只是模糊的不是一張背景圖片而是頁面上的任意元素。
方法一：頁面的元素所有包裹在一個div中，dialog與這個div同級，dialog彈出的時候，將這個div添加上模糊濾鏡blur().

滾動提示

方法一：
一、background-attachment：scroll可使的背景圖片隨着元素滾動而固定在元素上，所以能夠在滾動的時候建立一個漸變陰影。這樣滾動的時候上方都會存在一個陰影。
二、background-attachment：local可使背景圖片相對於元素的內容固定，所以能夠建立一個白色遮罩層當用戶滾動到頂部的時候遮擋住陰影。

ul {
	overflow: auto;
	background: linear-gradient(white 15px,rgba(255,255,255,0)),
		radial-gradient(at top, rgba(0,0,0,.9), transparent 70%);
	background-repeat:no-repeat;
	background-size:100% 50px,100% 15px;
	background-attachment: local, scroll;
}
複製代碼

交互式圖片對比

方法一：將兩張圖片重疊在一塊兒，而後經過resize:horizontal來調節覆蓋在上層的圖片width。

<div class="image-slider">
	<div>
		<img src="https://user-gold-cdn.xitu.io/2019/5/2/16a777e69b3ab1e4?w=400&h=400&f=jpeg&s=57981" alt="Before" />
	</div>
	<img src="https://user-gold-cdn.xitu.io/2019/5/2/16a777e6a9e65856?w=400&h=400&f=jpeg&s=63250" />
</div>

.image-slider {
	position:relative;
	display: inline-block;
}

.image-slider > div { /* 覆蓋在上層的圖片 */
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 50%;
	max-width: 100%;
	overflow: hidden;
	resize: horizontal;
}

.image-slider img {
	display: block;
	user-select: none;
}
複製代碼

第七章 結構與佈局

自適應內部元素

width與height中存在一些關鍵詞，其中width:min-content將會解析爲這個容器內最大的不可斷行元素的寬度（即最寬的單詞、圖片和具備固有寬度的盒元素）

<figure>
	<img src="https://user-gold-cdn.xitu.io/2019/5/2/16a777e6a9e65856?w=400&h=400&f=jpeg&s=63250" />
	<figcaption>
		The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.
	</figcaption>
</figure>

figure {
	max-width: 300px; /* 兼容回退處理 */
	max-width: min-content;
	margin: auto;
}

figure > img { max-width: inherit }
複製代碼

精確控制表格樣式

經過table-layout:fixed可以讓咱們更加自由的控制表格中的種種樣式。

根據兄弟元素數量/範圍設置樣式

一、只有1個子元素

li:only-child { /* code */}
或
li:first-child:nth-last-child(1) {/* code */ } /* 元素是第一個元素同時也是最後一個元素，就等同於只有一個元素 */
複製代碼

二、判斷有多少個元素

li:first-child:nth-last-child(4) {/* code */ } /* 元素是第一個元素同時也是倒數第四個元素，就等同於一共有四個元素 */
li:first-child:nth-last-child(4)～ li {/* code */} /* 當列表只有4個元素時，爲列表設置樣式 */
複製代碼

三、根據兄弟元素範圍

li:first-child:nth-last-child(n+4)～ li {/* code */} /* n能夠爲任何數，表示當列表至少含有4個元素時，爲列表設置樣式 */
li:first-child:nth-last-child(-n+4)～ li {/* code */} /* n能夠爲任何數，表示當列表最多含有4個元素時，爲列表設置樣式 */
li:first-child:nth-last-child(n+2):nth-last-child(-n+6)～ li {/* code */} /* n能夠爲任何數，表示當列表含有2～6個元素時，爲列表設置樣式 */
複製代碼

滿幅的背景，定寬的內容

傳統作法：外層的html元素設置爲滿幅的背景，而後內層html設置爲定寬居中的內容。
缺點：須要額外一層html元素。

新的思路：經過calc()函數來設置內容的左右邊距，使其定寬居中。

outer {
	padding:0 calc(50% - 450px);/* 經過calc()函數計算內容居中時元素的左右邊距；450px爲內容定寬900px/2計算獲得 */
}
複製代碼

垂直居中

CSS 技巧篇(七)：設置元素居中

緊貼底部的頁腳

方法一：設置mai主體元素的min-height爲窗口高度減去footer的高度。

.main {
	min-height:calc(100vh - 100px) /* 100px爲footer的高度*/
}
複製代碼

缺點：要求footer的高度必須是固定已知的。

方法二：將body元素設置爲flexBox，而後設置main主體元素設置爲flex:1。

body {
	display:flex;
	flex-flow:colum;
	min-height:100vh;
}
.main {
	flex:1;
}
複製代碼

第八章 過渡與動畫

緩動效果

在animation或者transition中的調速參數除了ease等關鍵詞以外，還能夠經過cubic-bezier()函數自定義調速函數。
cubic-bezier()函數在線調試能夠前往貝塞爾曲線在線調試。

逐幀動畫(以loading動畫爲例)

傳統作法：設置爲一張gif圖片。
缺點：gif沒法設置爲透明而且沒法修改動畫的屬性。

新的思路：將動畫劃分爲逐幀的圖片，而後經過animation對圖片進行過渡切換，steps()可以將動畫切分爲多幀，並且是幀與幀之間的硬切。

@keyframes loader {
	to { background-position: -800px 0; }
}

.loader {
	width: 100px; height: 100px;
	text-indent: 999px; overflow: hidden; /* Hide text */
	background: url(http://dabblet.com/img/loader.png) 0 0;
	animation: loader 1s infinite steps(8);
}
複製代碼

閃爍效果

方法一：動畫的50%設置爲transparent，這樣動畫就造成了從有->無→有的變化。

@keyframes blink { 50% { color: transparent } }
.blink-smooth {
	animation: 1s blink 3;
}
複製代碼

方法二：經過animation中的animation-direction:alternate屬性可以設置動畫的循環週期。

@keyframes blink { to { color: transparent } }
.blink-smooth {
	animation: .5s blink 6;
	animation-direction: alternate;
}
複製代碼

打字動畫

一、經過animation和steps控制width的值，將字符一個個的顯示出來；
二、經過border-right來創造光標；
三、ch能夠表示爲每個字符的寬度。

@keyframes typing {
	from { width: 0 }
}

@keyframes caret {
	50% { border-right-color: currentColor; }
}

h1 {
	/*width: 8.25em;*/
	width: 15ch; /* ch單位爲每一個字符的寬度。 */
	white-space: nowrap; /* 禁止內容換行 */
	overflow: hidden;
	border-right: .05em solid transparent; /* 經過border-right來創造光標 */
	animation: typing 8s steps(15),   /* 打字動畫 */
	           caret 1s steps(1) infinite; /* 光標動畫 */
}
複製代碼

沿環形路徑平移的動畫

方法一：在圖片外在包裹一層div，div爲順時針圍繞一個大圓的圓心正常旋轉，而img則是相對自身中心逆時針旋轉來抵消外部旋轉。

<div class="path">
	<div class="avatar">
		<img src="https://user-gold-cdn.xitu.io/2019/5/2/16a777e684aa60d7?w=400&h=400&f=jpeg&s=63250" />
	</div>
</div>

@keyframes spin {
	to { transform: rotate(1turn); }
}

.avatar {
	animation: spin 3s infinite linear;
	transform-origin: 50% 150px;
}

.avatar > img {
	animation: inherit;
	animation-direction: reverse;
}

/* Anything below this is just styling */

.avatar {
	width: 50px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}

.avatar > img {
	display: block;
	width: inherit;
}

.path {
	width: 300px; height: 300px;
	padding: 20px;
	border-radius: 50%;
	background: #fb3;
}
複製代碼

方式二：經過translate的移動來頂替transform-origin的效果

<div class="path">
	<img src="https://user-gold-cdn.xitu.io/2019/5/2/16a777e684aa60d7?w=400&h=400&f=jpeg&s=63250" class="avatar" />
</div>

@keyframes spin {
	from {
		transform: 
				   translateY(150px) translateY(-50%)
				   rotate(0turn)
		           translateY(-150px) translateY(50%)
		           rotate(1turn)
	}
	to {
		transform: 
				   translateY(150px) translateY(-50%)
				   rotate(1turn)
		           translateY(-150px) translateY(50%)
		           rotate(0turn);
	}
}

.avatar {
	animation: spin 3s infinite linear;
}

/* Anything below this is just styling */

.avatar {
	margin: 0 auto;
	display: block;
	width: 50px;
	border-radius: 50%;
	overflow: hidden;
}

.path {
	width: 300px; height: 300px;
	padding: 20px;
	border-radius: 50%;
	background: #fb3;
}
複製代碼

總結 總結正文