CSS3新增特性

一、选择器

新增的选择器（伪类选择器）主要有：

二、样式

1. 边框

（1）border-radius：创建圆角边框；

--border-top-left-radius: 左上角

--border-top-right-radius: 右上角

--border-bottom-right-radius: 右下角

--border-bottom-left-radius: 右下角

--border-radius： 左上角 右上角 右下角 左下角; /*4个值*/

--border-radius： 左上角 右上/左下 右下角; /*3个值*/

--border-radius： 左上/右下 右上/左下; /*2个值*/

--border-radius： 四个圆角值相同; /*1个值*/

（2）box-shadow：添加阴影；

（3）border-image：使用图片绘制边框。

2. 背景

（1）background-clip：

确定背景画区；

--background-clip: border-box; 背景从border开始显示

--background-clip: padding-box; 背景从padding开始显示

--background-clip: content-box; 背景显content区域开始显示

--background-clip: no-clip; 默认属性，等同于border-box

（2）background-origin：

设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐?

--background-origin: border-box; 从border开始计算background-position

--background-origin: padding-box; 从padding开始计算background-position

--background-origin: content-box; 从content开始计算background-position

（3）background-size：

用来调整背景图片的大小；

设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域。

只要图片的一边填满了盒子，就止步，不会在继续填充。

设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

等比例缩放图片，直到盒子被完全填充满，那么很显然有一部分会被截取掉。

如果盒子和图片都是正方形，那么contain和cover表现形式一样。

--background-size: contain; 缩小图片以适合元素（维持像素长宽比）

--background-size: cover; 扩展元素以填补元素（维持像素长宽比）

可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）；

当设置一个值时，第二个值为auto，横向展示为设置的值 ， 或者设置的百分比 * 盒子的宽度，纵向会按照原图宽高度等比缩放。

--background-size: 100px 100px; 缩小图片至指定的大小

--background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸

（4）background-break：

元素可以被分成几个独立的盒子（如使内联元素span跨越多行）background-break 属性用来控制背景怎样在这些不同的盒子中显示。

--background-break: continuous; 默认值。忽略盒之间的距离；

--background-break: bounding-box; 把盒之间的距离计算在内；

--background-break: each-box; 为每个盒子单独重绘背景

（5）多背景

以逗号分隔可以设置多背景，可用于自适应布局。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。前面的会堆叠在后面的上面。

--background-image:url(图片路径), url(图片路径); /*使用多张图片*/

--background-position: lefttop, rightbottom;

--background-repeat: no-repeat, repeat;

3. 文字

（1）word-wrap：

--normal：使用浏览器默认的换行；

--break-all：允许在单词内换行。

（2）text-overflow：当文本超过盒子大小时，是修建文本，还是省略号表示

--clip：修剪文本；

--ellipsis：显示省略符号来代表被修剪的文本。

（3）text-shadow：设置文本阴影。

能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

（4）text-decoration：

CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

--text-fill-color: 设置文字内部填充颜色

--text-stroke-color: 设置文字边界填充颜色

--text-stroke-width: 设置文字边界宽度

4. 颜色

（1）rgba分为两部分，rgb为颜色值，a为透明度；

CSS3支持背景半透明的语法格式：

background: rgba(0, 0, 0, 0.5);

alpha的取值范围在0~1之间

（2）hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度。

三、transition过度

可以被指定为一个或多个CSS属性的过渡效果，多个属性之间用逗号进行分隔，必须规定两项内容：过度效果，持续时间。

--transition： 要过度的属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)；

四、transform 转换

transform属性允许旋转，缩放，倾斜或平移给定元素。

注：transfrom不会影响其他元素的位置，transfrom对内联元素（inline）没有效果。

transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式：

--transform: translate(120px, 50%)：位移

--transform: scale(2, 0.5)：缩放

--transform: rotate(0.5turn)：旋转

--transform: skew(30deg, 20deg)：倾斜

五、animation 动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬

格式：

在实例div上 animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动

属性：

--animation-name：动画名称

--animation-duration：动画持续时间

--animation-timing-function：动画时间函数

--animation-delay：动画延迟时间

--animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环

--animation-direction：动画执行方向

--animation-paly-state：动画播放状态

--animation-fill-mode：动画填充模式

六、渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。css3渐变包括：

（1）linear-gradient：线性渐变

从上至下、从左至右、对角线······

--background-image: linear-gradient(direction, color-stop1, color-stop2, …);

（2）radial-gradient：径向渐变

颜色结点均匀分布的径向渐变：

--background: radial-gradient(red, green, blue);

颜色结点不均匀分布的径向渐变：

--background: radial-gradient(red5%, green10%, blue50%);

形状为圆形的径向渐变：

--background: radial-gradient(circle, red, green, blue);

七、多列显示

（1）column-count

指定某个元素应分为的列数。给多列容器指定列数后，在窗口尺寸发生变化时，浏览器会根据列数和容器宽度，自动计算出每列的宽度，以保证按照 3 列进行布局。

取值如下：

数值：将元素的内容以指定的列数显示

auto：列数将取决于其他属性，例如："column-width"

（2）column-width

指定列的宽度。取值如下：

length：指定列宽的长度

auto：浏览器将决定列的宽度

（3）column-span

指定某个元素应该跨越多少列(只有1和all)。column-span: 只能对块级（block）标签有效取值如下：

none：不跨列 默认，如果元素超过当前列宽度，文字将会向下列延伸

all：该元素应该跨越所有列

（4）column-gap

指定的列之间的间隙。

（5）column-rule

用于指定列之间的规则：宽度，样式和颜色。

（6）columns

columns是一个简写属性，用来设置列的宽度和列数。

八、CSS3 弹性盒子（ Flexible Box 或 flexbox）：

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item) 组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

容器属性：

--flex-direction：决定主轴的方向（即项目的排列方向）

--flex-wrap：定义，如果一条轴线排不下，如何换行

--justify-content：定义了项目在主轴上的对齐方式

--align-items：定义项目在交叉轴上如何对齐

--align-content：定义多根轴线（比如换行）的对齐方式。注：如果项目只有一根轴线，该属性不起作用

项目属性

--flex-grow：定义项目的放大比例，默认为0

--flex-shrink：定义了项目的缩小比例，默认为1

--align-self：定义项目自身在交叉轴上的排列方式，align-self属性允许单个项目有与其他项目不一样的对齐方式

九、CSS3多媒体查询 Media Queries：

@media可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则，实现适应显示。媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度

设备的宽度与高度

朝向 (智能手机横屏，竖屏) 。

分辨率

十、其他

关于CSS3其他的新特性还包括Grid栅格布局、媒体查询、混合模式等等…

参考文章:

https://blog.csdn.net/qq_42424368/article/details/123495773

https://blog.csdn.net/weixin_44337386/article/details/124740203