扩大可点击区域
关键实现：伪元素
具体分析：利用伪元素和定位达到鼠标移到边缘时候出现手型且可点击
.expand-range{position: relative;}.expand-range:after{content:'';position: absolute;top: -10px;right: -10px;bottom: -10px;left: -10px;}
巧用层叠上下文
关键实现： 伪元素 层叠上下文
具体分析： 利用层叠上下文和 z-index: -1 特性实现伪元素覆盖背景同时又不会遮挡文字
div:after{
content:'';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
}
边框内圆角
关键实现：伪元素 层叠上下文
具体分析：利用伪元素实现圆角矩形并叠加在父元素的背景之上文字之下
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
关键实现：clip-path
具体分析：css3 新属性clip-path可以实现区域裁剪，现在浏览器支持较好的有三个函数：clip-path: circle(50px at 50px 50px)以50px 50px的地方为圆心裁剪一个半径 50px 的圆；clip-path: ellipse(30px 40px at 50px 50px)以50px 50px的地方为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆；clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)按照多个坐标剪裁一个多边形，此处是菱形。有了clip-path，就可以轻易的实现任意多边形了
自适应的椭圆
关键实现：border-radius
具体分析：border-radius竟然可以设置 8 个角的半径～ 其中水平方向（对角线上下有弧度的地方）和垂直方向（对角线左右有弧度的地方）各四个，可以用/分割。如果水平或垂直方向指定的值少于四个，则会按照和margin、padding一样的规则重复。如果只指定来水平方向的，那么垂直方向的跟水平方向的一样。
border-radius: 5em1em;/*相当于border-radius: 5em 1em 5em 1em / 5em 1em 5em 1em;*/
自适应宽度
关键实现：min-content关键字
具体分析：如何实现一个元素的宽度根据后代元素的最大固定元素宽度自适应呢？绞尽脑汁，也只能利用display: inline-block的包裹特性实现一个不完全的版本：地址这种方法的缺陷是文本脱离了文档流，高度未计入包含块。但是如果利用min-content关键字，可以一行代码实现且无副作用：地址
width:min-content;
投影模拟多重边框
关键实现：box-shadow的inset
具体分析：使用box-shadow可以模拟实现多重边框，但是由于阴影不占空间，所以无法触发点击事件，鼠标hover边框时无法出现小手，所以需要配合inset关键字使用：地址
height: 200px;background:cyan;box-shadow: 0 0 0 5px#000inset, 0 0 0 10px#555inset, 0 0 0 15px#999inset;
不规则投影
关键实现：filter: drop-shadow()
具体分析：box-shadow不能透过透明背景显示出来，不能越过伪元素/子元素显示出来，而这些drop-shadow能做到。（但无论哪种投影都会被clip-path剪裁掉～～）地址
filter:drop-shadow(2px2px10pxrgba(0,0,0,.5));
半透明边框
关键实现：background-clip
具体分析：由于background属性默认会覆盖整个盒模型包括边框border，所以设置border-color: rgba(0, 0, 0, .5)时会透出背景色，达不到半透明边框的效果。css3增加了background-clip属性，定义背景填充的裁剪区域。设置padding-box便可以实现半透明边框：地址
border: 10pxsolidrgba(255, 255, 255,.5);background:white;background-clip:padding-box;
网格
关键实现：background-image、background-size
给多个渐变设置不同的方向、大小，可以实现网格的效果。地址
background:#58a;background-image:linear-gradient(white1px,transparent0),linear-gradient(toright,white1px,transparent0);background-size: 30px30px;
更好的网格：
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;
切角
关键实现：clip-path、径向渐变
具体分析：一般来说多边形的切角效果（其实还是不规则多边形）用clip-path都可以轻松实现，但是对于圆形的切角，使用径向渐变是最好的选择。但是如果有弧形的切角呢？radial-linear第一个参数指定渐变的起始点点（默认为中心点），同时可指定渐变类型是椭圆还是圆；地址
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;
会动的背景
关键实现：animation、background-position
具体分析：将动画最后一帧的background-position设为100% 0%，动画便会将背景位置从最初的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; }}
环形路径移动的动画
关键实现：animationtransform-origin
具体分析：设置旋转容器的transform-origin为大圆容器中心点，同时利用两个元素在向不同方向旋转时旋转角度互相抵消的原理，实现图像沿环形路径旋转同时保持自身角度的不变。注意小圆距离大圆的距离由大圆的padding属性控制，调整padding时需要调整小圆的旋转原点transform-origin以保持环形路径的正确：地址
@keyframesspin {to{transform:rotate(1turn); }}.avatar{animation: spin3slinear2sinfinite;transform-origin:110px110px;}.avatar>img{animation: inherit;animation-direction: reverse;}