前言
css3作为css的升级版本，css3提供了更加丰富实用的规范。
css3选择器
css3选择器分为基本选择器、层次选择器、动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器、属性选择器
- 基本选择器
- 层次选择器
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类选择器
- UI元素状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
- 属性选择器
边框特性
css3对网页中的边框进行了一些改进，主要包括支持圆角边框，多层边框，边框色彩与图片等。在css3中最常用的一个改进就是圆角边框，通过css3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义。
css3新增了三个边框属性，分别是：
border-radius：创建圆角边框
border-radius：5px 4px 3px 2px;/*四个值分别代表左上角，右上角，右下角，左下角，顺时针*/
border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角 复合属性：border-radius： 四个值：左上角 右上角 右下角 左下角 三个值：左上角 右上角和左下角 右下角 两个值：左上角和右下角 右上角和左下角 一个值：4个角都生效 当拿50%时，宽等于高为圆形 宽不等于高为椭圆形（百分比，参照的是元素本身的高度与宽度）
box-shadow：为元素添加阴影
box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; box-shadow:4px 2px 6px #f00,-4px -2px px #000,0px 0px 12px 5px #33cc00 inset;
语法：box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 属性值介绍: 2-1)偏移量： 素左上角（0，0）作为基准点,找水平方向和垂直方向的偏移量 水平： 正值 --- 右 ，负值 --- 左 垂直： 正值 --- 下 ，负值 --- 上 2-2)模糊程度： 边界模糊，但是边界线未动 由边界线向外模糊多少像素 2-3)扩展程度： 盒子阴影，上下左右都向外扩展多少像素 2-4)是否具有内阴影： inset(默认没有，也就是默认是外阴影) 加上inset,盒子的阴影为内阴影 扩展程度可为负值，但是模糊程度不可以
border-image：使用图片来绘制边框。可以把border-image理解为就是一个切片工具，会自动把用做边框的图片切割
border-image：border-image-source [border-image-slice] [border-image-width] [border-image-outset] [border-image-repeat]; border-image:url(border.png) 70 70 70 70 repeat;
border-image-source：定义边框图像的路径； border-image-slice：定义边框图像从什么位置开始分割； border-image-width：定义边框图像的厚度（宽度）； border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）； border-image-repeat：定义边框图像的平铺方式。
背景
css3新增了多个background新特性，如background-image、background-size、background-origin、background-clip等。
css3还允许使用多个属性在一个元素上添加多层背景图，该属性的应用大大改善了以往对多层次设计需要多层布局的问题，帮助Web前端开发这在不借助Photoshop的情况下实现堆页面的背景的设计，简化了背景图片的维护成本。
background-image：CSS3中可以通过background-image属性添加背景图片。不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。CSS3 同时支持多个背景图像，传多个img路径即可
background-image: url(img_flwr.gif), url(paper.gif); // 可以给不同的图片设置多个不同的属性 background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size：background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸
background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; background:url(img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat;
background-origin：background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
background-origin: border-box; 从border开始计算background-position
background-origin: padding-box; 从padding开始计算background-position
background-origin: content-box; 从content开始计算background-position
background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; background-origin:content-box;
background-clip： CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
background-clip: border-box; 背景从border开始显示
background-clip: padding-box; 背景从padding开始显示
background-clip: content-box; 背景显content区域开始显示
background-clip: no-clip; 默认属性，等同于border-box
border: 10px dotted black; padding: 35px; background: yellow; background-clip: content-box;
background-break：元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
background-break: continuous; 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景
background-break: each-box;
颜色与透明度
css3新增了新的颜色表示方式rgba与hsla
- rgba分为两部分，rgb为颜色值，a为透明度
color: rgba(255,00,00,1);
- hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
color: hsla( 112, 72%, 33%, 0.68);
- 不透明度
opacity: 0.5
多列布局
css3多列布局可以不使用多个div标签就能实现多列布局。css3中的多列布局模块描述了如何像报纸，杂志那样，把简单的区块拆成多列，并通过相应属性来实现列数，列宽，各列之间的空白间距，弹性盒模型，轻松地实现页面中的某一区块在水平，垂直方向对齐，是进行响应式网站开发的一大利器。
多列属性：
示例：
/* 以下实例将 <div> 元素中的文本分为 4 列： */ div { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; }
效果如下：
盒子模型box-sizing
在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：
box-sizing: content-box | border-box | inherit
content-box：默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box：重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。根据传统IE盒模型可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）
inherit：使元素继承父元素的盒模型模式
弹性布局Flexbox
具体可以参考这篇文章：CSS弹性盒总结
网格布局grid
网格是一组相交的水平线和垂直线，它定义了网格的列和行。
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。
<style> .grid-container { display: inline-grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style> </head> <body> <h1>display: inline-grid</h1> <p>使用 display: inline-grid; 来设置内联的网格容器：</p> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> </body>
盒子的变形transform
在css2.1中，想让某个元素变形必须要借助javascript写大量的代码实现，在css3中加入了变形属性，该属性在2D或3D空间操作盒子的位置和形状，来实现例如旋转，扭曲，缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，Web前端中的内容展示更加形象，真实。
- 转换属性：
- 2D转换，2D转换有以下属性：
- 3D转换，3D转换有以下属性：
过渡与动画
css的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果更加具有流动性与平滑性。css3的“动画”（animation）属性能实现更加复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现,使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示,而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化。
- transition过渡
div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 2s, transform 2s; } div:hover { width: 200px; height: 200px; -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); }
- animation动画
div { width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; } @keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
web字体
css3中引入了@font-face，@font-face是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题。
下表列出了所有的字体描述和里面的@font-face规则定义：
@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf') ,url('Sansation_Light.eot'); /* IE9 */ } div { font-family:myFirstFont; } </style>
媒体查询
css3中引入媒体查询(mediaqueries) ，可为不同分辨率的设备定义不同的样式。比如,在可视区域小于480像素时,可能想让原来在右侧的网站侧栏显示在主内容的下边，以往必须通过JavaScript判断用户浏览器的分辨率，然后再通过JavaScript修改css。css3中只需要通过媒体查询就可实现上述操作。
@media screen and (max-width: 600px) { div.example { display: none; } }
阴影shadow
阴影主要分为两种:文本阴影(text-shadow)和盒子阴影(box-shadow)。文本阴影在css2中已经存在，但没有得到广泛的运用(css2.1中删除了)。css3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器解决方案，使文本看起来更加醒目。css3中的盒子阴影的引入，可轻易地为任何元素添加盒子阴影。
text-shadow: 5px 5px 5px #FF0000; box-shadow: 10px 10px 5px #888888;
渐变Gradients
CSS3渐变以在两个或者多个指定颜色之间显示平移的过渡
CSS3 定义了以下几种类型的渐变（gradients）：
- liner-gradient线性渐变
- radial-gradient径向渐变
- conic-gradient圆锥渐变
- 重复渐变
background-image: linear-gradient(#e66465, #9198e5); background-image: radial-gradient(red, yellow, green);
颜色rgba
color:rgba(R,G,B,A)
文字与字体——text-overflow与word-wrap
text-overflow用来设置是否使用一个省略标记(……)表示对象内文本的溢出。
但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须其他条件：
- 定义强制文本在一行显示（white-space:nowrap）
- 溢出内容为隐藏（overflow:hidden）
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
word-wrap用来设置文本行为，当前行超过指定容器的边界时是否断开转行
word-wrap:normal |break-word;
用户界面
在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框。
- resize调整尺寸：CSS3中，resize属性指定一个元素是否应该由用户去调整大小。
div { resize:both; overflow:auto; }
- box-sizing方框大小调整：box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
div { box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ width:50%; float:left; }
- outline-offset外形修饰： outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同：轮廓不占用空间、轮廓可能是非矩形
div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
参考
https://www.yisu.com/zixun/667463.html
https://juejin.cn/post/6844903518520901639#heading-1
https://blog.csdn.net/t13965688123/article/details/124606275
https://blog.csdn.net/cgh508802602/article/details/126610564
