3D动画以及盒阴影盒滤镜
3D
content3 {
transform:rotateX(45deg);
}
通过给坐标系添加perspective样式即可增加Z轴
默认情况下, 坐标系的Z轴位于父元素的水平中线与垂直中线的交界处
z轴的位置可以用perspective-origin样式来设置
默认位置为perspective-origin:50% 50%;
与变化原点类似
盒阴影
box-shadow:xOffset yOffset burlLehgth spread color outset;
盒阴影:水平方向偏移 垂直方向偏移 阴影模糊距离 阴影缩放 阴影颜色 阴影显示方式;
看似没有任何效果,原因其实很简单,因为此时影子的大小与元素一致,而且没有给影子设置偏移,那么以用户的从上往下看的视角来看,元素的影子全部都被元素本身给遮挡住了
box-shadow:0px 0px 0 0 blue outset;
盒阴影:水平方向不偏移 垂直方向不偏移 阴影模糊距离为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影
box-shadow:100px 100px 0 0 blue outset;
盒阴影:水平方向向右偏移100px 垂直方向向下偏移100px 阴影模糊距离为0 阴影缩放为0 阴影颜色为蓝色 外部显示阴影
缩放:
color:盒阴影的颜色
这个值最好理解,就是影子的颜色,此处颜色可设置渐变色、英语单词、rgb、rgba、十六进制等,作用就是改变影子的颜色
inset:盒阴影的显示方式
gb、rgba、十六进制等,作用就是改变影子的颜色
inset:盒阴影的显示方式
默认情况下值为outset,影子在元素的下面,就如同一开始介绍的盒阴影模型一般,但是如果给盒阴影加上inset,则影子的显示就如同在元素的边缘向内部蔓延一般,此时影子的大小会遮盖部分元素的内容
滤镜
见资源