盒子显隐，伪类边框，盒子阴影,2d平面形变

最新推荐文章于 2022-01-26 12:50:21 发布

weixin_30745641

最新推荐文章于 2022-01-26 12:50:21 发布

阅读量107

点赞数

原文链接：http://www.cnblogs.com/liu--huan/p/10299779.html

版权

-盒子显隐

　　显隐的盒子尽量不影响其他盒子的布局

display:none;     消失的时候不占位置，显示的时候占位
opacity:0-1;     盒子透明度
overflow: hidden;    超出部分隐藏
background-color:rgba( 0 0 0 0 )      背景色，透明色

显隐方式（1）消失的时候不占位置，显示的时候占位（不可以动画处理）

display:none;  消失的时候不占位置，显示的时候占位（不可以动画处理）
display:block;  盒子显示

显隐方式（2）无论是否消失，始终占位置

opacity:0-1;  盒子透明度，（可以动画处理）
            无论是否消失，始终占位置

显隐方式（3）超出部分隐藏

overflow:hidden | auto | scroll

overflow: hidden;  超出部分隐藏
overflow: auto;    超出部分隐藏,不超出正常，超出滚动显示
overflow: scroll;    超出部分隐藏，不管超不超出，都是滚动显示

-伪类边框

.box:before | .box:after

.box {
    给伪类边框提供参考系
    position: relative;   相对定位
}

文本之前
.box:before {
    content:"";
    position:absolute;    绝对定位，脱离文档流不位置
    bottom:0;             
    left:0;
}

-盒子阴影

盒子是一个独立的显示图层
可以写多套图层

box-shadow: x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色，…… （可以写多套阴影图层）
box-shadow: 0 0 0 0 red;
box-shadow: 0 2px 15px -8px black;

text-shadow: 文本阴影（了解）

-2d平面形变（了解）

属性值之间的先后顺序往往也会导致过程的不同
transform:translateX( -300px ) rotate( 1080deg ) scale( x,y )
            位移距离             旋转角度 deg       形变

位移距离  translate
    transform:translateX( -300px )    x轴位移
    transform:translateY( -300px )    Y轴位移

形变  scale
    transform:scale( 20px )    x轴y轴一起拉扯
    transform:scaleX( 20px )   x轴拉扯
    transform:scaleY( 20px )   Y轴拉扯

旋转角度  rotate( )
    transform: rotateY( 1080deg )    Y轴旋转
    transform: rotateX( 1080deg )    X轴旋转
    transform: rotateZ( 1080deg )    Z轴旋转

形变参考点
    transform-origin: x轴坐标 y轴坐标  （原点为左上角）

转载于:https://www.cnblogs.com/liu--huan/p/10299779.html