伪类边框,字体图标,显隐,overflow,阴影,二维变形
伪类边框
设计一个不占位的边框 => 伪类 :before | :after
.box:before{content:";width: height: color: left bottom: position:absolution }
.box:after{content:";width: height: color: left bottom: position:absolution }
before after分别一个边框不占位必须绝对定位对应的box相对定位
字体图标
导入文件,定义对应的类名,设置外联link 后既可以用i标签
显隐、
opacity:透明度 0~1设置所以可以做控制动画
而 display 只有none或者block因此不能做动画;瞬变 两者都必须 定位因为不影响其他盒子布局
overflow
结合绝对定位移动;通过控制hidden auto scroll 可以控制显示内容,滚动条;可以实现 与显隐相似效果;但是是滑动效果
类似图的滑动控制显示区域
阴影
box-shadow x轴 y轴 模糊度 宽度 颜色
通过五个参数进行阴影控制达到效果
1.盒子阴影是一个独立的显示图层, 永远出现在背景层之下(即使背景层透明, 也会被覆盖遮挡)
2.盒子可以绑定多套阴影图层
3.阴影图层永远相对于显示图层进行偏移
二维变形
transform-origin:50px 200px ;相对于盒子左上角的坐标
transition-form rotateX(0deg) translate() scale();
角度 平移 缩放
顺序不同效果不同