【面试必知】CSS3都有哪些新特性

·  阅读 698

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时代就有的选择器。但属性不只有IDclass两个。比如<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()中的argba()中的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)
分类:
前端
标签: