CSS效果属性

box-shadow

x轴偏移，y轴偏移，模糊像素，扩展像素，rgb（x,x,x,透明度）
inset x轴 y轴 模糊 扩展 rgb 内阴影

text-shadow

• 立体感
• 印刷品质感
  x轴 y轴 宽度px 颜色

border-redius

• 圆角矩形
• 圆形

border-radius: 50%;

• 半圆 / 扇形

border-left-top-radius:50%;

• 奇奇怪怪

border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px; 水平/垂直

background

• 雪碧图动画

.i{
	width:20px;
	height:20px;
	background:url(.background.png) no-repeat;
	background-size:20px 40px;
	transition:background-position .4s; 
}
.i:hover{
	background-position: 0 -20px;
}

• 背景图尺寸适应
  图片比容器大，会把多余的内容截掉。
  background-position:center center; 会让图片居中。
  background-size:100% 100%; 这样会让图片拉伸，改变原有的长宽比。
  background-size:cover; 会覆盖整个容器，但是长宽比不变。
  background-size:contain; 长宽比也是保持不变，显示整个图片，会有留白。

clip-path

• 对容器进行裁剪（容器本身大小不变）

.container{
	clip-path:insert(100px,50px); 方形区域
	clip-path:circle(50px at 100px 100px); 100*100的地方半径为50的圆形区域
}


.i{
	clip-path:circle(50px at 100px 100px);
	transition:clip-path .4s;
}
.i:hover{
	clip-path:circle(80px at 100px 100px);
}

面试

• 如何产生不占空间的边框

1. box-shadow
2. outline

• 如何实现圆形元素（头像）
  border-radius：50%
• 实现IOS图标的圆角
  clip-path:(svg)
• 如何实现半圆、扇形等图形
  border-radius组合：
• 背景图居中/不重复/改变大小
  background-position
  background-repeat
  background-size(cover/contain)