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);
}
面试
- 如何产生不占空间的边框
- box-shadow
- outline
- 如何实现圆形元素(头像)
border-radius:50% - 实现IOS图标的圆角
clip-path:(svg) - 如何实现半圆、扇形等图形
border-radius组合: - 背景图居中/不重复/改变大小
background-position
background-repeat
background-size(cover/contain)