⭐️ 有关CSS3的学习总结CSS3> CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。> CSS3 在未来会按照模块化的方式去发展:https://www.w3.org/Style/CSS/current-work.htmlCSS3 新特性:> 新增了 更加实用的选择器 ，例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。> 新增了 更好的视觉效果 ，例如:圆角、阴影、渐变等。> 新增了 丰富的背景效果 ，例如:支持多个背景图片，同时新增了若干个背景相关的属性。> 新增了全新的布局方案 —— 弹性盒子。> 新增了 Web 字体，可以显示用户电脑上没有安装的字体。> 增强了颜色，例如: HSL 、 HSLA 、 RGBA 几种新的颜色模式> 新增 opacity 属性来控制 透明度。> 增加了 2D 和 3D 变换，例如:旋转、扭曲、缩放、位移等。> 增加 动画与过渡效果 ，让效果的变换更具流线性、平滑性。......私有前缀> W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。> 查询 CSS3 兼容性的网站: https://caniuse.com/> 常见浏览器私有前缀浏览器值Chrome-webkit-Safari-webkit-Firefox-moz-旧 Opera-o-旧 IE-ms-新增长度单位> rem 根元素字体大小的倍数，只与根元素字体大小有关> vw 视口宽度的百分之多少 10vw 就是视口宽度的 10%> vh 视口高度的百分之多少 10vh 就是视口高度的 10%> vmax 视口宽高中大的那个的百分之多少。(了解即可)> vmin 视口宽高中小的那个的百分之多少。(了解即可)新增颜色设置方式CSS3 新增了三种颜色设置方式，分别是: rgba 、 hsl 、 hsla 。> 详细查询 CSS2 | 思维导图新增选择器CSS3 新增的选择器有:动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素。> 详细查询 CSS2 | 思维导图新增盒模型相关属性> box-sizing 怪异盒模型使用 box-sizing 属性可以设置盒模型的两种类型可选值含义content-boxwidth 和 height 设置的是盒子内容区的大小（默认值）border-boxwidth 和 height 设置的是盒子总大小。（怪异盒模型）> resize 调整盒子大小使用 resize 属性可以控制是否允许用户调节元素尺寸值含义none不允许用户调整元素大小。 (默认)both用户可以调节元素的宽度和高度horizontal用户可以调节元素的宽度vertical用户可以调节元素的高度> box-shadow 盒子阴影使用 box-shadow 属性为盒子添加阴影语法：box-shadow: h-shadow v-shadow blur spread color inset;各个值的含义值含义padding-box水平阴影的位置，必须填写，可以为负值border-box垂直阴影的距离，必须填写，可以为负值content-box可选，模糊距离默认值：box-shadow:none 表示没有阴影示例：/* 写两个值，含义:水平位置、垂直位置 */ box-shadow: 10px 10px; /* 写三个值，含义:水平位置、垂直位置、颜色 */ box-shadow: 10px 10px red; /* 写三个值，含义:水平位置、垂直位置、模糊值 */ box-shadow: 10px 10px 10px; /* 写四个值，含义:水平位置、垂直位置、模糊值、颜色 */ box-shadow: 10px 10px 10px red; /* 写五个值，含义:水平位置、垂直位置、模糊值、外延值、颜色 */ box-shadow: 10px 10px 10px 10px blue; /* 写六个值，含义:水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */ box-shadow: 10px 10px 20px 3px blue inset;> opacity 不透明度opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。> opacity 与 rgba 的区别?opacity 是一个属性，设置的是整个元素(包括元素里的内容)的不透明度。rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。新增背景属性> background-origin作用：设置背景图的原点语法值含义padding-box从 padding 区域开始显示背景图像（默认值）border-box从 border 区域开始显示背景图像content-box从 content 区域开始显示背景图像> background-clip作用：设置背景图的向外裁剪的区域语法：值含义padding-box从 padding 区域开始向外裁剪背景（默认值）border-box从 border 区域开始向外裁剪背景content-box从 content 区域开始向外裁剪背景text背景图只呈现在文字上注意：若值为 text，那么background-clip 要加上-webkit-前缀> background-size作用：设置背景图的尺寸语法1、用长度值指定背景图片大小，不允许负值。background-size: 300px 200px;2、用百分比指定背景图片大小，不允许负值。background-size: 100% 100%;auto背景照片的真实大小（默认值）contain将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内。注意:可能会造成容器里部分区域没有背景图片。background-size: contain;cover将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上.注意:背景图片有可能显示不完整。（相对比较好的选择）background-size: cover;> background 复合属性语法：background: color url repeat position / size origin clip注意：1、origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置;如 果设置了两个值，前面的是 ，后面的 clip 。2. size 的值必须写在 值的后面，并且用 / 分开。> 多背景图CSS3 允许元素设置多个背景图片/* 添加多个背景图 */ background: url(../images/bg-lt.png) no-repeat, url(../images/bg-rt.png) no-repeat right top, url(../images/bg-lb.png) no-repeat left bottom, url(../images/bg-rb.png) no-repeat right bottom;新增边框属性> border-radius 边框圆角在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角。同时设置四个角的圆角：border-radius:10px;分开设置每个角的圆角：（几乎不用):值作用border-top-left-radius设置左上角圆角半径:1. 一个值是正圆半径，2. 两个值分别是椭圆的 x 半径、 y 半径。border-top-right-radius设置右上角圆角半径:1. 一个值是正圆半径，2. 两个值分别是椭圆的 x 半径、 y 半径。border-bottom-right-radius设置右下角圆角半径:1. 一个值是正圆半径，2. 两个值分别是椭圆的 x 半径、 y 半径。border-bottom-left-radius设置左下角圆角半径:1. 一个值是正圆半径，2. 两个值分别是椭圆的 x 半径、 y 半径。分开设置每个角的圆角，综合写法(几乎不用):border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y> 边框外轮廓（了解）值含义outline-width外轮廓的宽度outline-color外轮廓的颜色outline-stylenone：dotted：dashed：solid：double：无轮廓点状轮廓虚线轮廓实现轮廓双线轮廓outline-offset设置外轮廓与边框的距离，正负值均可注意：outline-offset 不是 outline 的子属性，是独立属性outline 复合属性outline:50px solid blue;新增文本属性> text-shadow 文本阴影在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影。语法：text-shadow: h-shadow v-shadow blur color;值描述h-shadow必须写，水平阴影的位置，允许负值v-shadow必须写，垂直阴影的位置，允许负值blur可选，模糊的距离color可选，阴影的颜色*默认值：text-shadow:none 表示没有阴影> white-space 文本换行在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式。常用值如下：值含义normal文本超出边界自动换行（默认值）文本中的换行被浏览器识别为一个空格pre原样输出，与 pre 标签的效果相同pre-wrap在 pre 效果的基础上，超出元素边界自动换行pre-line在 pre 效果的基础上，超出元素边界自动换行且只识别文本中的换行，空格会忽略nowrap强制不换行> text-overflow 文本溢出在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。常用值如下：值含义clip当内联内容溢出时，将溢出部分裁切掉（默认值）ellipsis当内联内容溢出块容器时，将溢出部分替换为...注意 ：要使 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值，white-space 为 nowrap 值。> text-decoration文本修饰CSS3 升级了 text-decoration 属性，让其变成了复合属性text-decoration: text-decoration-line || text-decoration-style || text-decoration-color子属性及其含义值含义text-decoration-line设置文本装饰线的位置noneunderlineoverlineline-through指定文字无装饰（默认值）指定文字的装饰为下划线指定文字的装饰为上划线制定文字的装饰为贯穿线text-decoration-style文本装饰线条的形状soliddoubledotteddashedwavy实线（默认）双线点状线条虚线波浪线text-decoration-color文本装饰线条的颜色> -webkit-text 文本描边注意：文字描边功能仅 webkit 内核浏览器支持值含义-webkit-text-stroke-width设置文字描边的宽度，写长度值-webkit-text-stroke-color设置文字描边的颜色，写颜色值-webkit-text-stroke复合属性，设置文字描边宽度和颜色CSS3 新增渐变> linear-gradient 线性渐变多个颜色之间的渐变，默认从上到下渐变background-image: linear-gradient(red,yellow,green);使用关键词设置线性渐变的反向background-image: linear-gradient(to top,red,yellow,green); background-image: linear-gradient(to right top,red,yellow,green);使用角度设置线性渐变的方向background-image: linear-gradient(30deg,red,yellow,green);调整开始渐变的位置background-image: linear-gradient(red 50px,yellow 100px ,green 150px);> linear-gradient 径向渐变多个颜色之间的渐变，默认从圆心四散（注意：不一定是正圆，要看容器本身宽高比）background-image: radial-gradient(red,yellow,green);使用关键词调整渐变圆的圆心位置background-image: radial-gradient(at right top,red,yellow,green);使用像素值调整渐变圆的圆心位置background-image: radial-gradient(at 100px 50px,red,yellow,green);调整渐变形状为正圆background-image: radial-gradient(circle,red,yellow,green);调整形状的半径background-image: radial-gradient(100px,red,yellow,green); background-image: radial-gradient(50px 100px,red,yellow,green);调整开始渐变的位置background-image: radial-gradient(red 50px,yellow 100px,green 150px);> linear-gradient 重复渐变无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient 。使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 linear-gradient 。> 渐变小案例有意思的效果：横格纸、立体球 👉🏻 点我查看 👈🏻Web 字体> 基本用法可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字体了。语法 （简写样式）@font-face { font-family: "微软雅黑"; src: url('./微软雅黑.ttf'); }语法 （高兼容样式）@font-face { font-family: "waou"; font-display: swap; src: url('webfont.eot'); /* IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), url('webfont.woff') format('woff'), /* chrome、firefox */ url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android*/ url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */ }> 定制字体中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制。可使用阿里 Web 字体定制工具：https://www.iconfont.cn/webfont> 字体图标相比图片更加清晰。灵活性高，更方便改变大小、颜色、风格等。兼容性好，IE 也能支持。字体图标的具体使用方式，每个平台不尽相同，最好参考平台使用指南。阿里图标官网地址: https://www.iconfont.cn/2D变换前提：二维坐标系如下图所示：> transform 2D位移2D位移可以改变元素的位置，具体使用方式如下：先给元素添加 转换属性 transform编写 transform 的具体值，相关可选值如下：值含义translateX设置水平方向位移，需指定长度值，若制定的是百分比，是参考自身宽度的百分比。translateY设置垂直方向位移，需指定长度值，若制定的是百分比，是参考自身高度的百分比。translate一个值代表水平方向，两个值代表：水平和垂直方向。注意点：位移与相对定位很相似，都不脱离文档流，不会影响到其他元素。对相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。浏览器针对位移有优化，与定位相比，浏览器处理位置的效率更高。transform 可以链式编写，例如：transform: translateX(30px) translateY(40px);位移对行内元素无效。位移配合定位，可实现元素水平垂直居中。.box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }> transform 2D缩放2D缩放是指：让元素放大或缩小，具体使用方式如下：先给元素添加 转换属性 transform编写 transform 的具体值，相关可选值如下：值含义scaleX设置水平方向的缩放比例，值为一个数字，1 表示不缩放，大于 1 放大，小于 1 缩小。scaleY设置垂直方向的缩放比例，值为一个数字，1 表示不缩放，大于 1 放大，小于 1 缩小。scale同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。注意点：scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解。借助缩放，可实现小于 12px 的文字。> transform 2D旋转2D旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：先给元素添加 转换属性 transform编写 transform 的具体值，相关可选值如下：值含义rotate设置旋转角度，需制定一个角度值（ deg ），正值顺时针，负值逆时针。注意：rotateZ(20deg) 相当于 rotate(20deg)，当然到了3D 变换的时候，还能写：rotate(x,x,x)> 2D扭曲（了解）2D扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发中几乎不用，了解即可，具体使用方法如下：先给元素添加 转换属性 transform编写 transform 的具体值，相关可选值如下：值含义skewX设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯 。skewY设置元素在垂直方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯。skew一个代表 skewX ，两个值分别代表：skewX 、skewY> transform 多重变换多个变换，可以使用同一个 transform 来编写。transform: translate(-50%, -50%) rotate(45deg);注意点：多重变换时，建议最后旋转。> transform-origin 变换原点元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。修改变换原点对位移没有影响，对旋转和缩放会产生影响。如果提供两个值，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，若是像素值，表示横坐标，纵坐标取 50%，如果是关键词，则另一个坐标取 50%请注意：transform-origin: 50% 50% ，通过百分比变换原点在元素的中心位置，百分比是相对于自身。—— 默认值transform-origin: left top ，通过关键词变换原点在元素的左上角。transform-origin: 50px 50px , 通过像素值变换原点距离元素左上角 50px 50px 的位置。transform-origin: 0 , 只写一个值的时候，第二个默认值为 50%3D变换> transform-style 开启3D空间重要原则：元素进行3D变换的首要操作：父元素必须开启3D空间。使用 transform-style 开启3D空间，可选值如下：值含义flat让子元素位于此元素的二维平面内（2D空间）——默认值preserve-3d让子元素位于此元素的三维空间内（3D空间）> prespective 设置景深何为景深？—— 指定观察者与 z=0 平面的距离，能让发生 3D 变化的元素，产生透视效果，看起来更加立体。使用 prespective 设置景深，可选值如下：值含义none不指定透视—— （默认值）preserve-3d指定观察者距离 z=0 平面的距离，不允许负值注意：perspective 设置发生 3D 变化元素的父元素！> perspective-origin 透视点位置所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。使用 perspective-origin 设置观察者位置（透视点的位置），例如：/* 相对坐标轴往右偏移400px， 往下偏移300px(相当于人蹲下300像素，然后向右移动400像素看元素) */ perspective-origin: 400px 300px; ！注意：通常情况下，我们不需要调整透视点的位置！> transform 3D位移3D 位移是在 2D 位移的基础上，可以让元素沿 Z 轴位移，具体使用方法如下：先给元素添加 转换属性 transform编写 transform 的具体值，3D 相关可选值如下：值含义translateZ设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。translate3d第 1 个参数对应 x 轴，第 2 个参数对应 y 轴，第3 个参数对应 z 轴，且均不能省略> transform 3D旋转3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：先给元素添加 转换属性 transform编写 transform 的具体值，3D 相关可选值如下：值含义rotateX设置 x 轴旋转角度，需制定一个角度值(deg)，面对 x 轴正方向：正值顺时针，负值逆时针。rotateY设置 y 轴旋转角度，需制定一个角度值(deg)，面对 y 轴正方向：正值顺时针，负值逆时针。rotate3d前 3 个参数分别表示坐标轴：x，y，z，第 4 个参数表示旋转的角度，参数不允许省略。例如：transform：rotate3d(1,1,1,30deg)，意思是：x、y、z 分别旋转 30 度。> transform 3D缩放3D 缩放是在 2D 缩放的基础上，可以让元素沿着 z 轴缩放，具体使用方式如下：先给元素添加 转换属性 transform编写 transform 的具体值，3D 相关可选值如下：值含义scaleZ设置 z 轴方向的缩放比例，值为一个数字，1 表示不缩放，大于 1 放大，小于 1 缩小。scale3d第 1 个参数对应 x 轴，第 2 个参数对应 y 轴，第 3 个参数对应 z 轴，参数不允许省略。> transform 多重变换多个变化，可以同时使用一个 transform 来编写。transform: translateZ(100px) scaleZ(3) rotateY(40deg);注意点：多重变换时，建议最后旋转。> backface-visibility 背部可见性使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：值含义visible指定元素背面可见，允许显示正面的镜像 —— 默认值hidden指定元素背面不可见注意：backface-visibility 需要加载发生 3D 变换元素的自身上。