CSS中box-shadow属性和2D变换

Posted 2022-08-13 公众号_前端每日技巧

box-shadow

box-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果:

.wrapper 
    position: fixed;
    left: 0;
    top: 0,
    bottom: 0,
    right: 0,
    background-color: red;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .3)

以上box-shadow中的0表示水平偏移，3px表示垂直偏移，5px表示模糊大小，​​rgba(0, 0, 0, 0.3)​​表示投影的颜色。

常用的投影效果主要由偏移、模糊、颜色组成。

无论是投影效果还是盒阴影，光源都默认在左上角，所以水平偏移如果是整数则表示投影偏右，如果是负数则表示投影偏左，同理垂直偏移也是一样。

内阴影

box-shadow中支持​​inset​​关键字，表示阴影向元素内部。

.box 
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow:inset 3px 3px 5px rgba(0, 0, 0, .6);

.box1 
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, .6);

box-shadow: 内阴影效果适合实现内嵌效果，表现更低一层的视觉效果。

bobx-shadow：内阴影的水平和垂直偏移方向和外阴影一致，都是左上角光源。

颜色覆盖

box-shadow可以生成的阴影位于文字内容下面，背景颜色的上面，所以我们就可以实现让元素上面覆盖一层颜色。

box-shadow内阴影颜色覆盖是有局限的，对img这样的标签元素时无效的。

容易忽略的地方

box-shadow可以接收2-4个值，前两个值是固定的，分别表示水平偏移和垂直偏移，第三个值表示模糊半径，第四个值表示扩展半径，第四个值日常中很少用到，主要用于两个方面：​​轮廓模拟​​​和​​单侧阴影​​。

轮廓模拟我们可以借助第四个长度值来实现：

.warpper 
    background-color: blue;
    // 轮廓模拟
    box-shadow: inset 0 0 2px #BF56FC;

单侧阴影可以用扩展半径来实现，因为扩展半径支持负值，当我们给模糊半径设置的比较大，就可以看到左右两侧有部分阴影了。

.warpper 
    width: 160px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .4);

box-shadow还可以实现多边框效果，而且也支持圆角效果。我们只需要多设置几个进行叠加就可以实现。

如果想用box-shadow实现多种css加载效果，我们可以与​​keyframes​​结合，这样动画效果也有。

box-shadow还可以用于动画与性能的优化，例如我们实现一个盒子阴影的过渡效果:

.wrapper 
    transition: all .4s;
    box-shadow: 0 7px 11px rgba(0, 0, 0, 0.4);


.wrapper:hover 
    box-shadow: 0 15px 23px rgba(0, 0, 0, 0.8)

css 2D

css2D变换方法有位移、旋转、缩放和斜切。

// 2D 缩放
transform: scale(1)
// 2D 斜切
transform: skew(8deg)
// 2D 旋转
transform: rotate(10deg)
// 2D 位移
transform: translate(6, 7)

rotate

旋转的角度有4中单位：​​deg​​​、​​grad​​​、​​rad​​​、​​turn​​，分别表示角度(degrees)、百分度(grads)、弧度(radians)、圈数(turns)。

百分度(grad)：一个梯度，也可以说是一个百分度1/400个整圈，所以100gads等于90deg，它也可以支持负值，表示逆时针方向旋转。

角度(deg)：范围是0-360，负值表示逆时针旋转，比如逆时针旋转90度可以用-90deg表示。

弧度(rad): 1弧度等于180/π， 1.5708rad相当于100gads也相当于90deg。

圈数(turn): 1圈等于360度，所以1turn等于360deg

scale

scale()表示缩放，支持x和y两个方向。

// 水平放大3倍，垂直缩小1/4
transform: scale(3, .25);
// 也可以分开写
transform: scaleX(3);
transform: scaleY(.25)

缩放变化不支持百分比值，仅仅支持数值，所以如果我们写成​​scale(155%, 45%)​​​是无效的。但是缩放变化支持负值，实现垂直翻转效果​​transform: scaleY(-1)​​​,实现水平翻转效果​​transform: scaleX(-1)​​​, 如果我们想要水平缩放和垂直缩放的大小一样， 我们可以​​transform: scale(3)​​，这样表示元素在水平方向和垂直方向的尺寸放大2倍。

skew

skew()斜切和scale()缩放一样，也支持x和y两个方向：

// 水平斜切22度，垂直斜切缩33度
transform: skew(22deg, 33deg);
// 也可以分开写
transform: skewX(22deg);
transform: skewY(33deg);

transform

transform特征对2d和3d变换都可以使用，当我们无论使用transform什么属性值，这个元素盒模型和位置都不会有任何变化。但是我们需要注意的是元素应用transform变换后，可能因为某些原因还是会影响排版，主要是在触发滚动条的显示和隐藏情况下影响容器的可用尺寸。

对于内联元素无效

内敛元素是无法应用transform变换的，但是这里的内联元素不包括替换元素，而且不支持所有变换特性。

<span>不能变化的元素</span>
    span 
        transform: translateX(88px);
    

虽然此时span位移效果，但是我们可以通过两种方法来实现位移效果，第一种方法：使用相对定位来实现，第二种：给元素增加块级特性。

不同顺序会有不同效果，我们可以一次性应用多个不同的变换函数，但是我们需要注意即使这些变换内容一样，如果顺序不同效果也会不一样。

transform属性后还有一个不常用的特性变化，当我们创建层叠上下文时： 和opacity属性值不是1的元素类似，如果transform属性值不是​​none​​​，则会创建一个新的层叠上下文。这个特性一般用于两个方面，第一个是：覆盖其他元素，第二个是限制​​z-index: -1​​的层级表现。