CSS阴影

文章 114 字

别小看下面的 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

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