CSS阴影

Posted by 渐行渐远 on Wednesday, December 1, 2021 共701字

别小看下面的 CSS 代码，对于一个 CSS 门外汉来说，隐藏的信息是足够丰富的。比如属性的长度单位，一些人可能还不知道 px、em、rem 的区别。简单来说， em 是基于 font-size 的继承属性，rem 是在 em 的基础上重新定义了一个参照标准。默认情况下，1 em = 16 px。一般来说，使用 rem 设置字号，em 设置其他大部分的属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<head>
<style>
    :root {
        font-size: 1em;
        --main-font: orange;
    }

    .featured {
        width: 20em;
        height: calc(6em - 16px);
        font-size: 1rem;
        border-radius: .15em;
        background-color: var(--main-font);
        box-shadow: .45em .25em #6f9090;
    }   
</style>
</head>
<body>
    <div class="featured"></div>
</body>

自定义属性

通过 –- 前缀我们支持了自定义属性，并且通过 var 来引用这个自定义属性。使用这种方式，提供了一种支持模板的通用能力，很神奇是不是。

calc

使用该方法可以计算两个长度，特别神奇，如果我们设置了页面的宽度为30%，如果觉得大了，甚至可以使用 30% 去和指定的单位做减法。

属性简写的顺序

经常遇到一些组合属性或者简写属性，他们的顺序是什么呢，比如 margin，属于顺时针的上、右、下、左，这是赋值4个值的情况，还有赋值3个、2个的情况。 例子中的 box-shadow 就属于象限系的，抽象成 XY 坐标轴，分别标识 X 轴和 Y 轴的偏移

类选择器的匹配顺序

这个类选择器其实就更有讲究了，我们可以给一个元素赋值多个样式类，但究竟哪个会生效呢？简单考虑的话，依次是样式表的来源、选择器的优先级、源码顺序。 选择器的优先级必须是怎么确定的呢，和服务器开发中版本控制非常相似，第一位是ID、第二位是类、第三类是标签，比如最终结果是 0.0.4, 这个 CSS 规则 就可以和别的 CSS 规则去比较优先级

所以，我们应该意识到，元素在应用样式的时候，其实是是去样式表中匹配的样式，然后再确定的样式表中的优先级

当然，还有很多别的可以改变优先级的设置，比如 !important

之后，我把这个代码的显示结果展示在下面，供大家参考