Preface

前几天面试被问到一个问题：CSS 3有哪些新特性，我整个人都不好了。心里想的全是：

我都用了那么长时间的CSS了，我哪知道哪个是CSS 3的新特性，哪个不是？

事实上，当前主要网站均已支持CSS 3。虽然雀食没必要特意区分哪个是CSS 3的新特性，哪个不是，但面试爱考啊。

所以我写了这篇博客。

1. 导览

CSS 3不是特别新鲜的事物。早在1999年时开始制订，并且直到现在还不能被称作“完善”。

根据下面诸多的References来看，常用的CSS 3新特性有这些：

• 属性选择器
• border-radius
• 颜色
• 阴影
• text-shadow
• 渐变
• 多背景图片
• 3D-transform

我慢慢来填坑。（20210829）

2. 属性选择器

其实属性选择器也不是什么新鲜玩意儿。在CSS 3之前就已经用上了：

• # ： ID选择器
• . ： class选择器

这两个是在CSS 2.1时代就有的选择器。但属性不只有ID和class两个。比如<a>标签中更常用的属性是href，如果只采用CSS 2.1语法，那么便无法通过href属性选择<a>。

但在CSS 3中，可以这样选择：

/* 示例来自于MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors */

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

3. border-radius

其实我应该答出来这个题目的。毕竟我在画鸣人的时候，是采用大量的border-radius的：

/* 示例来自我自己的代码 */

html{
    background-color: #ff8b60;
}

.body{
    display : flex;
    width : 100vw;
    height: 100vh;
    margin: 0;
    align-items: center;
    justify-content: center;
}

.naruto{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: transparent;
    border: 15px solid #a55b41;
    overflow: hidden;
}

.hair{
    height: 90px;
    background-color: rgb(220, 215, 104);
    border-bottom: 5px solid rgb(206, 201, 104);
}

.hiddenleaf{
    height: 60px;
    background-color: rgb(77, 71, 71);
}

.hiddenleaf .plate{
    width : 150px;
    height : 45px;
    background-color: rgb(206, 206, 206);
    margin: 0 auto;
    padding : 3px 0 0 0 ;
    vertical-align: middle;
    border-radius: 10px;
    transform: translateY(6px);
    overflow: hidden;
}

.plate::after{
    content : '';
    display : block;
    width: 85px;
    height : 60px;
    margin-left: 100px;
    margin-top: -5px;
    background-color: rgb(181, 185, 195);
    transform: skew(-45deg);
}

.face{
    position: absolute;
    top: 0;
    width: 290px;
    height: 290px;
    background-color: rgb(242, 201, 190);
    border-radius: 50%;
    border: 5px solid rgb(223, 122, 85);
    z-index : -1;
}

.lefteye{
    position: absolute;
    left : 25%;
    top: 170px;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    border: 5px solid rgb(99, 138, 170);
    z-index: 1;
}

.righteye{
    position: absolute;
    right : 25%;
    top: 170px;
    width: 35px;
    height: 35px;
    background-color: white;
    border-radius: 50%;
    border: 5px solid rgb(99, 138, 170);
    z-index: 1;
}

.mouth{
    position: absolute;
    bottom : 10%;
    left : 50%;
    width: 75px;
    height: 75px;
    margin-left: -37px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: rgb(228, 158, 138);
}

.mouth::after{
    content : '';
    display: block;
    width: 75px;
    height: 40px;
    background-color: #f2c9be;
}

.whisker{
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-right: 12px solid transparent;
    border-left: 70px solid #917972;
    border-top: 12px solid transparent;
    transform: rotate(-35deg);
}

/* left whiskers */
.whisker:first-child{
    top : 70%;
}

.whisker:nth-child(2){
    top : 80%;
}

.whisker:nth-child(3){
    top: 90%
}

/* right whiskers */
.whisker:nth-child(4){
    top: 70%;
    right: 0;
    transform: rotate(205deg);
}

.whisker:nth-child(5){
    top: 80%;
    right: 0;
    transform: rotate(205deg);
}

.whisker:nth-child(6){
    top: 90%;
    right: 0;
    transform: rotate(205deg);
}

用border-radius : 50%;能画圆。

3. 颜色

在CSS 2.1中可以使用：

• 英文单词
• 十六进制
• rgb()函数

来指定颜色。

在CSS 3中，新增了几个指定颜色的方法：

• rgba()函数
• hsl()及hsla()函数
• opacity属性，用于设置透明度

在上面的所有新特性中，a均指alpha，且alpha指代的就是opacity。

3.1 rgba

其实就是rgb()函数加了第四参数alpha。示例：

rgba(255,255,255,.5) /* white with 50% opacity(50%透明度的白色) */
rgba(255 255 255 / 0.5); /* CSS Colors 4 space-separated values：和上面一个意思 */

3.2 hsl

由于hsla()中的a与rgba()中的a没有差别，所以本部分只写hsl()。

MDN的官方说明如下：

The hsl()  functional notation expresses a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color’s transparency.

翻译如下（我自己翻的）：

hsl() 函数是用色调（hue）、饱和度（saturation）和亮度（liteness）来表示颜色。额外的alpha参数代表颜色的透明度。

示例如下：

/* 示例来自：https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl() */
hsl(100, 100%, 50%) /* #5f0 */
hsl(235, 100%, 50%, .5) /* #0015ff with 50% opacity */
hsl(235 100% 50%); /* CSS Colors 4 space-separated values */

hsl()可加第四参数。加上第四参数后，与hsla()功能相同。

Last: transform API

在Reference部分中的第7条。由于时间关系先简写。（20210829）

可以用于做CSS动画，有了它之后就不用非要用anime.js做了。

References

1. Introduction to CSS3 (w3.org)
2. New CSS3 Features: Find the Difference Between CSS and CSS3 (bitdegree.org)
3. CSS3 New Features (Gradients, Webfonts, Transitions, Shadow Effects…) (jharaphula.com)
4. CSS3 教程 | 菜鸟教程 (runoob.com)
5. What’s new in CSS 3. WHAT IS CSS? | by Sahil Dhawan | Beginner’s Guide to Mobile Web Development | Medium
6. rgba() – CSS: Cascading Style Sheets | MDN (mozilla.org)
7. transform – CSS（层叠样式表） | MDN (mozilla.org)