CSS你不知道的冷知识

CSS鲜为人知的小tips

标准的制定过程

​ 与大众的理解大相径庭的是，W3C 并不“生产”标准。实际上，它扮演的是一个论坛的角色：W3C 以工作组的方式，把某项技术的相关各方聚 集起来，最终由他们来产出标准。当然，W3C 并不只是一个观察者：它设定了整个平台的规则，监督整个进程。但这些技术规范（基本上）并不是由 W3C 的工作人员编写完成的。 CSS 规范通常是由 CSS 工作组的成员来编写的。

在编写本书时，CSS 工作组共有 98 名成员，人员结构如下：

• 86 名来自 W3C 会员公司的成员（88%）
• 7 名特邀专家（7%）
• 5 名 W3C 工作人员（5%）

一行文字放不下，超出文本以省略号显示

p {
    border: 2px solid;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

双层边框效果

方式一：

.box1 {
    width: 400px;
    height: 200px;
    background: yellowgreen;
    border: 10px solid #655;
    /*描边*/
    outline: 50px solid deeppink;
}

这种方式优点在于边框样式比较灵活；还可以通过outline-offset调整描边出现的位置。

方式2

.box1 {
    width: 400px;
    height: 200px;
    background: yellowgreen;
    box-shadow:
        0 0 0 10px #655,
        0 0 0 15px deeppink;
}

使用box-shadow模拟的边框可以通过添加多个阴影效果实现多重边框，依次往后，只需调大第三个参数即可，需要注意这两种方式实现的边框并不能有点击效果，也不会影响其他元素的布局。

background-position 的扩展语法

如果你想让图片在距离右边20px，底部40px的位置，可以这样写：

.box2 {
    width: 400px;
    height: 400px;
    border: 2px solid;
    background-image: url('./love.jpeg');
    background-repeat: no-repeat;
    background-position: right 20px bottom 40px;
}

background-origin

默认情况下，background-position设置right、top这样的值时，是相对于padding-box偏移的，如下：

.box2 {
    width: 400px;
    height: 400px;
    border: 20px solid;
    background-image: url('./love.jpeg');
    background-repeat: no-repeat;
    background-position: right 20px bottom 40px;
    padding: 50px;
}

你可以通过修改background-origin的属性值，使他相对于内容盒或者边框盒偏移，也就是说background-origin的默认值是padding-box，它还有两个属性值是border-box和content-box。

.box2 {
    width: 400px;
    height: 400px;
    border: 20px solid;
    background-image: url('./love.jpeg');
    background-repeat: no-repeat;
    background-position: right 20px bottom 40px;
    padding: 50px;
    background-origin: content-box;
}

文本行的斑马条纹

有的时候为了让读者更好的看清每一行的内容，可以给文本设置斑马纹的背景颜色。

.text {
    width: 400px;
    padding: .5em;
    line-height: 1.5;
    background: beige;
    background-size: auto 3em;
    background-origin: content-box;
    background-image:
        linear-gradient(rgba(0, 0, 0, .2) 50%, transparent 0);
}

需要注意，每一次调 line-heigh 时，均需要同时修改 background-size 的值。