【CSS】CSS3新特性_css3的新特性-优快云博客

本文详细介绍了CSS3中的新特性，包括各种属性选择器、结构伪类选择器、伪元素选择器的用法，以及文字与字体的装饰、多列布局、背景处理、边框效果、颜色过渡和动画效果。同时提到了浏览器私有属性和媒体查询在响应式设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🍒前言

本文重点讲解CSS3引入的一些常见的新特性，快来一起学习吧👇👇👇。

1️⃣新增选择器

属性选择器

[attr]表示带有以 attr 命名的属性的元素。
[attr=value]存在 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value]存在 attr 命名的属性，且包含属性值包含value的元素。
[attr*=value]存在 attr 命名的属性，且包含属性值包含value的元素。
[attr^=value]存在 attr 命名的属性，且属性值开始为 value 的元素。
[attr$=value]存在 attr 命名的属性，且属性值结尾为 value 的元素。
[attr$=value s] s 表示区分大小写。
[attr$=value i] i 表示不区分大小写。

结构伪类选择器

:first-child 表示在一组兄弟元素中的第一个元素。
:nth-child(n) n为正整数，表示在一组兄弟元素中的第n个元素。
:last-child 表示在一组兄弟元素中的最后一个元素。

:nth-child(odd) 表示在一组兄弟元素中的奇数行元素。
:nth-child(even) 表示在一组兄弟元素中的偶数行元素。
公式：
:nth-child(2n) 表示在一组兄弟元素中的偶数行元素。
:nth-child(2n+1) 表示在一组兄弟元素中的奇数行元素。
:nth-child(5n) 表示在一组兄弟元素中的5的倍数行元素。
还有很多…………

/*of-type和child使用方法一样的*/
:first-of-type 表示在一组兄弟元素中的第一个元素。
:nth-of-type(n) n为正整数，表示在一组兄弟元素中的第n个元素。
:last-of-type 表示在一组兄弟元素中的最后一个元素。

伪元素选择器

::before 作为已选中元素的第一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

::after 作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

::first-letter 对首字母的处理。

::first-line 下划线。

::marker 改变li样式。

::placeholder 修改默认值样式。

扩展：

:root选择器用于选择文档的根元素。一般用于声明全局CSS。

获取:root中的值

var root=document.querySelector(":root")
//获取
var color=getComputedStyle(root).getPropertyValue("--color")

修改:root中的值

var root=document.querySelector(":root") 
//设置
root.style.setProperty("--color",value)

2️⃣文字与字体

文本装饰

①text-decoration-line：用于设置元素中的文本的修饰类型。

text-decoration-line: none;/*没有*/
text-decoration-line: underline;/*下划线*/
text-decoration-line: overline;/*上划线*/
text-decoration-line: line-through;/*删除线*/

②text-decoration-color：用于设置文本修饰线的颜色。

③text-decoration-style：设定的线的样式。

text-decoration-style: solid;/*实线*/
text-decoration-style: double;/*双划线*/
text-decoration-style: dotted;/*斑点线*/
text-decoration-style: dashed;/*虚线*/
text-decoration-style: wavy;/*波浪线*/

④text-decoration-thickness：用于设置元素中文本所使用的装饰线（如 line-through、underline 或 overline）的笔触厚度。

text-decoration-thickness: auto;/*由浏览器为文本装饰线选择合适的厚度。*/
text-decoration-thickness: from-font;/*如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值。*/
text-decoration-thickness: 3px;

⑤简写形式

text-decoration：text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness

文字溢出

text-overflow: 用于确定如何提示用户存在隐藏的溢出内容。

text-overflow: clip;/*默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。*/
text-overflow: ellipsis;/*用省略号来表示被截断的文本*/

注意：text-overflow 属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，你需要在元素上添加几个额外的属性：

//超出一行，隐藏文本并显示省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

//超出二行或多行，隐藏文本并显示省略号
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; //限制显示文本的行数

文本阴影

text-shadow用来设置文本的阴影效果。

①offset-x：阴影的水平偏移距离，正值向右偏移，负值向左偏移。

②offset-y：阴影的垂直偏移距离，正值向下偏移，负值向上偏移。

③blur-radius：阴影的模糊程度，不能是负值，值越大越模糊。

④color：阴影颜色。

⑤简写方法

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

自定义文字

@font-face：用于自定义字体。

/* 加载多个本地字体 */
@font-face{
  font-family: "myFontName";
  src:  local(黑体), local("Microsoft YaHei"), local("HelveticaNeue-Light"), local("Helvetica Neue Light");
}

/* 加载一种字体格式 */
@font-face{
  font-family: "myFontName";
  src:  url('font.woff') format('woff');
}

/* 加载多个字体格式，兼容更多浏览器 */
@font-face{
  font-family: "myFontName";
  src: url('font.eot'); /* IE9*/
  src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('font.woff2') format('woff2'),
  url('font.woff') format('woff'), /* chrome、firefox */
  url('font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS*/
  url('font.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS */
}

/*应用自定义字体*/
.box{
  font-family: "myFontName";
}

3️⃣多列布局

①column-count：用于描述元素的列数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            column-count:3;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
        <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>   
        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
    </div>
</body>
</html>

效果对比图：

②column-width：设置列宽

③column-gap：改变列间间隙。

④column-rules：在列间加入一条分割线。column-rule 是 column-rule-color和column-rule-style的简写形式。

column-rule: 4px dotted rgb(79, 185, 227);/*分割线宽度 分割线类型 分割线颜色*/

4️⃣背景

原始起始位置:background-origin

有三个值分别是：
border-box：背景图片的摆放以 border 区域为参考。
padding-box：背景图片的摆放以 padding 区域为参考。
content-box：背景图片的摆放以 content 区域为参考。

裁剪:background-clip

有四个值分别是：
border-box：背景延伸至边框外沿（但是在边框下层）。
padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box：背景被裁剪至内容区（content box）外沿。
text：背景被裁剪成文字的前景色。

效果对比图：

图片大小:background-size

/*缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。*/
background-size: cover;
/*缩放背景图片以完全装入背景区，可能背景区部分空白。*/
background-size: contain;
/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%;
/* 两个值,第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 100% 100%;

5️⃣边框

圆角效果:border-radius

该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 简写为一个属性。

/*当写一个参数时，表示四边的圆角半径都为30px*/
border-radius: 30px;
/*当两个参数时，第一个参数表示左上和右下的圆角半径、第二个参数表示右上和左下*/
border-radius: 25% 10%;
/*当写三个或四个参数时，四个值分别代表左上角，右上角，右下角，左下角，就是顺时针*/
border-radius: 10% 30% 50% 70%;

阴影效果:box-shadow

该属性也是一个简写属性，简写方法如下:

box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/*多个阴影，用逗号分隔*/
.box-shadow{
    box-shadow:4px 2px 6px #f00,-4px -2px px #000,0px 0px 12px 5px #33cc00 inset;
}

边框图片

①border-image-source：定义边框图像的路径。

②border-image-slice：定义边框图像从什么位置开始分割。

③border-image-width：定义边框图像的厚度(宽度)。

④border-image-outset：定义边框图像的外延尺寸(边框图像区域超出边框的量)。

⑤border-image-repeat：定义边框图像的平铺方式。

⑥简写方式

border-image：border-image-source [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat];

6️⃣颜色

rgba(red, green, blue, alpha)

前面三个值就是rgb值，最后一个是设置透明度的，取值为0~1。

background-color:rgba(0,0,0,.5)

渐变

渐变角度属性：top、bottom、left 、 right。

圆心位置属性：left、right、top、bottom、center。

/*线性渐变 background-image:linear-gradient(渐变角度，颜色值1，颜色值2...，颜色值n); 默认从上到下线性渐变*/

/*从左到右线性线性渐变*/
background-image: linear-gradient(to right,red,blue);

/*从左上角到右下角的线性渐变*/
background-image: linear-gradient(to bottom right,red,blue);

/*定义角度的线性渐变*/
linear-gradient(0deg, red,blue);

/*重复性线性渐变 background-image:repeating-linear-gradient(渐变角度，颜色值1，颜色值2...，颜色值n);*/
background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);

/*径向渐变 background-image:radial-gradient(渐变形状 圆心位置，颜色值1，颜色值2...，颜色值n); 默认从里到外渐变*/

/*不均匀径向渐变*/
background-image: radial-gradient(green 50%,red,blue);

/*椭圆形渐变 在长方形中效果明显*/
background-image: radial-gradient(ellipse,red,blue);

/*圆形渐变 默认圆形在中心center*/
background-image: radial-gradient(circle at center,red,blue);

/*重复性径向渐变  background-image:repeating-radial-gradient(渐变形状圆心位置，颜色值1，颜色值2...，颜色值n); 默认中间*/
background: repeating-radial-gradient(circle at bottom,red, red 5px, blue 5px, blue 10px);

7️⃣盒子模型

box-sizing

/*默认值，如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。*/
box-sizing:content-box
/*告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。*/
box-sizing:border-box

8️⃣flex布局

主要查看了阮一峰老师写的的这篇文章，写的很细致：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

9️⃣过渡

①transition-property：用于指定应用过渡属性的名称。

有三个取值分别是：
none：没有属性会获得过渡效果
all：默认值，所有的属性都会获得过渡效果
要用到动画的属性名：定义应用过渡效果的css属性名称列表

②transition-duration：用于指定过渡的持续时间。

③transition-timing-function：用于指定过渡的类型。

有六个取值分别是：
linear：匀速过渡。
ease：是默认值，慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in：慢速开始的过渡效果。
ease-out：慢速结束的过渡效果。
ease-in-out：慢速开始和结束。
step-start：直接开始。
step-end：戛然而止。
steps(n)：几步完成动画。
cubic-bezier:三次贝塞尔。

④transition-delay：用于指定过渡的延迟等待时间。

⑤简写方式

transition: transition-property transition-duration transition-timing-function transition-delay

🔟转换

2D转换

移动

transform:translate(X,Y)

缩放

transform:scale(X,Y)

只写一个参数，就是整体缩放。写2个参数分别代表x轴缩放倍数和y轴缩放倍数。

旋转

transform:rotate(度数deg)

综合写法

transform:translate() rotate() scale()

其顺序会影响转换的效果(先旋转会改变坐标轴的位置)

3D转换

透视

perspective: 500px;/*值>0三维元素比正常大，值<0三维元素比正常小*/

给需要透视的父级加。

3d移动

transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: translate3d(12px, 50%, 3em);/*后面三个值分别代表X,Y,Z*/

3d旋转

transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: rotate3d(1, 2.0, 3.0, 10deg);#前面三个值表示倍数，最后一个表示沿着y轴旋转20deg，z轴30deg

3d缩放

transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: scale3d(2.5, 1.2, 0.3);

注意：如果使用了3d属性，那么需要要在父元素上开启transform-style: preserve-3d;`让元素保持在3d立体空间中，3d效果才会生效。

1️⃣1️⃣动画

①animation-name：动画名称。

②animation-duration：持续时间。

③animation-timing-function：运动曲线。

linear：匀速过渡。
ease：是默认值，慢速开始，然后变快，然后慢速结束的过渡效果。
ease-in：慢速开始的过渡效果。
ease-out：慢速结束的过渡效果。
ease-in-out：慢速开始和结束。
step-start：直接开始。
step-end：戛然而止。
steps(n)：几步完成动画。
cubic-bezier:三次贝塞尔。

④animation-delay：何时开始。

⑤animation-iteration-count：播放次数，默认为1，可以直接写播放次数，单位为正数或者无数次 infinite。

⑥animation-direction：是否反方向。

normal：默认值，每个动画循环结束，动画重置到起点重新开始。
reverse：动画第一次运行时是反向的，然后往回退。
alternate：每个动画循环结束，再反方向播放。
alternate-reverse：动画第一次运行时是反向的，然后下一次是正向，后面依次循环。

⑦animation-fill-mode：动画起始或者结束的状态。

forwards：动画结束后停留在结束位置
backwards：默认值，动画结束后回到动画起始位置

⑧简写形式

animation ：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；

使用用法：

①定义动画

/*move是自定义的动画名*/
@keyframes move{
    /* 开始 */
    0%{
        transform: translate(0,0);
    }
    25%{
        transform: translate(1000px,0);
    }
    50%{
        transform: translate(1000px,500px);
    }
    75%{
        transform: translate(0px,500px);
    }
    /* 结束 */
    100%{
        transform: translate(0,0);
    }
}

②使用动画：谁使用，动画就给谁加。

div{
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 动画名称 必写*/
    animation-name: move;
    /* 持续时间 必写*/
    animation-duration: 2s;
    /* 运动曲线 默认ease以低速开始加快再以低速结束 ease-in以低速开始 ease-out以低速结束 ease-in-out以低速开始结束 steps()指定时间函数中的间隔数量 匀速的linear*/
    animation-timing-function: linear;
    /* 何时开始 2s后执行*/
    animation-delay: 2s;
    /* 重复多少次  infinite无限的 默认1*/
    animation-iteration-count: infinite;
    /* 是否反方向播放 alternate反方向 默认normal*/
    animation-direction: alternate;
    /* 动画结束后回到起始状态 默认backwards forwards可以停在结束位置*/
    animation-fill-mode: forwards;
    /*当然可以不用上面的直接写简写形式*/
    /*animation：move 2s linear 2s infinite normal forwards*/
}

1️⃣2️⃣浏览器私有属性

浏览器私有属性主要是为了兼容老版本浏览器。

-moz-:代表firefox浏览器私有属性
-ms-:代表ie浏览器私有属性
-webkit-:代表safarichrom私有属性
-o-:代表Opera私有属性

1️⃣3️⃣媒体查询

@media screen :主要用于响应式布局。

以一道蓝桥真题为例:【页面布局】响应式 Gulp 中文网

题目要求：

当屏幕宽度 max-width 为 1400px 时，页面效果如下（不包括图上尺寸标记）。

2.当屏幕宽度 max-width 为 900px 时，页面效果如下（不包括图上尺寸标记）。

3.当屏幕宽度 max-width 为 650px 时，头部导航隐藏，并在右侧显示图标，底部列表的宽度为 100% ，页面效果如下。

<style media="screen"> 
/*当屏幕最大宽度为1400px时页面展示成啥样……*/
@media screen and (max-width:1400px) {
    nav .content,
    main section {
        width: 900px;
    }
}
/*当屏幕最大宽度为900px时页面展示成啥样……*/
@media screen and (max-width:900px) {
    nav .content,
    main section {
        width: 700px;
    }
}
/*当屏幕最大宽度为650px时页面展示成啥样……*/
@media screen and (max-width:650px) {
    nav .content .list{
        display: none;
    }
    main ul li{
        width: 100%;
    }
    main ul li:nth-child(even) {
        margin-left: 0;
    }
}
<style>