擴(kuò)大可點(diǎn)擊區(qū)域
關(guān)鍵實(shí)現(xiàn)：偽元素
具體分析：利用偽元素和定位達(dá)到鼠標(biāo)移到邊緣時(shí)候出現(xiàn)手型且可點(diǎn)擊
.expand-range{position: relative;}.expand-range:after{content:'';position: absolute;top: -10px;right: -10px;bottom: -10px;left: -10px;}
巧用層疊上下文
關(guān)鍵實(shí)現(xiàn)： 偽元素 層疊上下文
具體分析： 利用層疊上下文和?z-index: -1?特性實(shí)現(xiàn)偽元素覆蓋背景同時(shí)又不會(huì)遮擋文字
div:after{
content:'';
position: absolute;
? top: 0; right: 0; bottom: 0; left: 0;
? z-index: -1;
}
邊框內(nèi)圓角
關(guān)鍵實(shí)現(xiàn)：偽元素 層疊上下文
具體分析：利用偽元素實(shí)現(xiàn)圓角矩形并疊加在父元素的背景之上文字之下
div {
? position: relative;
? z-index: 1;
? height: 200px;
? padding: 10px;
? background: #333;
}
div::after {
? content: '';
? position: absolute;
? left: 10px;
? top: 10px;
? right: 10px;
? bottom: 10px;
? z-index: -1;
? border-radius: 5px;
? background: cyan;
}
clip-path
關(guān)鍵實(shí)現(xiàn)：clip-path
具體分析：css3 新屬性clip-path可以實(shí)現(xiàn)區(qū)域裁剪，現(xiàn)在瀏覽器支持較好的有三個(gè)函數(shù)：clip-path: circle(50px at 50px 50px)以50px 50px的地方為圓心裁剪一個(gè)半徑 50px 的圓；clip-path: ellipse(30px 40px at 50px 50px)以50px 50px的地方為圓心裁剪一個(gè)橫向半徑 30px，縱向半徑 40px 的橢圓；clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)按照多個(gè)坐標(biāo)剪裁一個(gè)多邊形，此處是菱形。有了clip-path，就可以輕易的實(shí)現(xiàn)任意多邊形了
自適應(yīng)的橢圓
關(guān)鍵實(shí)現(xiàn)：border-radius
具體分析：border-radius竟然可以設(shè)置 8 個(gè)角的半徑～ 其中水平方向（對(duì)角線上下有弧度的地方）和垂直方向（對(duì)角線左右有弧度的地方）各四個(gè)，可以用/分割。如果水平或垂直方向指定的值少于四個(gè)，則會(huì)按照和margin、padding一樣的規(guī)則重復(fù)。如果只指定來水平方向的，那么垂直方向的跟水平方向的一樣。
border-radius: 5em1em;/*相當(dāng)于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/
自適應(yīng)寬度
關(guān)鍵實(shí)現(xiàn)：min-content關(guān)鍵字
具體分析：如何實(shí)現(xiàn)一個(gè)元素的寬度根據(jù)后代元素的最大固定元素寬度自適應(yīng)呢？絞盡腦汁，也只能利用display: inline-block的包裹特性實(shí)現(xiàn)一個(gè)不完全的版本：地址這種方法的缺陷是文本脫離了文檔流，高度未計(jì)入包含塊。但是如果利用min-content關(guān)鍵字，可以一行代碼實(shí)現(xiàn)且無副作用：地址
width:min-content;
投影模擬多重邊框
關(guān)鍵實(shí)現(xiàn)：box-shadow的inset
具體分析：使用box-shadow可以模擬實(shí)現(xiàn)多重邊框，但是由于陰影不占空間，所以無法觸發(fā)點(diǎn)擊事件，鼠標(biāo)hover邊框時(shí)無法出現(xiàn)小手，所以需要配合inset關(guān)鍵字使用：地址
height: 200px;background:cyan;box-shadow: 0 0 0 5px#000inset,? ? ? ? ? ? ? 0 0 0 10px#555inset,? ? ? ? ? ? ? 0 0 0 15px#999inset;
不規(guī)則投影
關(guān)鍵實(shí)現(xiàn)：filter: drop-shadow()
具體分析：box-shadow不能透過透明背景顯示出來，不能越過偽元素/子元素顯示出來，而這些drop-shadow能做到。（但無論哪種投影都會(huì)被clip-path剪裁掉～～）地址
filter:drop-shadow(2px2px10pxrgba(0,0,0,.5));
半透明邊框
關(guān)鍵實(shí)現(xiàn)：background-clip
具體分析：由于background屬性默認(rèn)會(huì)覆蓋整個(gè)盒模型包括邊框border，所以設(shè)置border-color: rgba(0, 0, 0, .5)時(shí)會(huì)透出背景色，達(dá)不到半透明邊框的效果。css3增加了background-clip屬性，定義背景填充的裁剪區(qū)域。設(shè)置padding-box便可以實(shí)現(xiàn)半透明邊框：地址
border: 10pxsolidrgba(255, 255, 255,.5);background:white;background-clip:padding-box;
網(wǎng)格
關(guān)鍵實(shí)現(xiàn)：background-image、background-size
給多個(gè)漸變?cè)O(shè)置不同的方向、大小，可以實(shí)現(xiàn)網(wǎng)格的效果。地址
background:#58a;background-image:linear-gradient(white1px,transparent0),linear-gradient(toright,white1px,transparent0);background-size: 30px30px;
更好的網(wǎng)格：
background:#58a;background-image:linear-gradient(white2px,transparent0),linear-gradient(toright,white2px,transparent0),linear-gradient(rgba(255, 255, 255,.5) 1px,transparent0),linear-gradient(toright,rgba(255, 255, 255,.5) 1px,transparent0);background-size: 75px75px, 75px75px, 15px15px, 15px15px;
切角
關(guān)鍵實(shí)現(xiàn)：clip-path、徑向漸變
具體分析：一般來說多邊形的切角效果（其實(shí)還是不規(guī)則多邊形）用clip-path都可以輕松實(shí)現(xiàn)，但是對(duì)于圓形的切角，使用徑向漸變是最好的選擇。但是如果有弧形的切角呢？radial-linear第一個(gè)參數(shù)指定漸變的起始點(diǎn)點(diǎn)（默認(rèn)為中心點(diǎn)），同時(shí)可指定漸變類型是橢圓還是圓；地址
background:radial-gradient(circleattopleft,transparent15px,blue0)topleft,radial-gradient(circleattopright,transparent15px,cyan0)topright,radial-gradient(circleatbottomright,transparent15px,cyan0)bottomright,radial-gradient(circleatbottomleft,transparent15px,cyan0)bottomleft;background-size: 50% 50%;background-repeat:no-repeat;
會(huì)動(dòng)的背景
關(guān)鍵實(shí)現(xiàn)：animation、background-position
具體分析：將動(dòng)畫最后一幀的background-position設(shè)為100% 0%，動(dòng)畫便會(huì)將背景位置從最初的0% 0%向最后的100% 0%過度：地址
div{width:150px;height:150px;background:url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');background-size: auto100%;animation: panoramic10slinear infinite alternate;}div:hover{animation-play-state: paused;}@keyframespanoramic {to{background-position:100%0; }}
環(huán)形路徑移動(dòng)的動(dòng)畫
關(guān)鍵實(shí)現(xiàn)：animationtransform-origin
具體分析：設(shè)置旋轉(zhuǎn)容器的transform-origin為大圓容器中心點(diǎn)，同時(shí)利用兩個(gè)元素在向不同方向旋轉(zhuǎn)時(shí)旋轉(zhuǎn)角度互相抵消的原理，實(shí)現(xiàn)圖像沿環(huán)形路徑旋轉(zhuǎn)同時(shí)保持自身角度的不變。注意小圓距離大圓的距離由大圓的padding屬性控制，調(diào)整padding時(shí)需要調(diào)整小圓的旋轉(zhuǎn)原點(diǎn)transform-origin以保持環(huán)形路徑的正確：地址
@keyframesspin {to{transform:rotate(1turn); }}.avatar{animation: spin3slinear2sinfinite;transform-origin:110px110px;}.avatar>img{animation: inherit;animation-direction: reverse;}
