本文详细介绍了CSS3的多项高级特性，包括选择器、背景、边框、文本效果、媒体查询、多栏布局、动画、2D及3D转换、伸缩布局等内容，帮助读者深入理解并掌握CSS3的最新特性和应用场景。
CSS3新特性:
css3都有兼容性，都要加前缀-webkit- -moz- -o- -ms-
1).选择器:
主要讲 E:nth-child(序号不是索引号) 第N个位置的E的子元素 li:nth-child(1){}; tr:nth-child(odd/even); 匹配所以表格奇数行/偶数行
E:nth-last-child(n) 倒数第N个位置的E的子元素
CSS2的一些选择器:
E[foo] 属性选择器 E可省略
E[foo='bar'] 属性选择器
E:first-child 该元素的第一个子元素
::after/::before 附着在元素前后的[伪元素],元素不在DOM中生成,是在浏览器渲染引擎渲染CSS的时候画上去的
before和after 和父元素不在一个线性空间内的，而是另一层元素盖在父元素上的。
CSS3的新增选择器
E[foo^='bar'] foo的属性值以bar开始 E可省略
E[foo$='bar'] foo的属性值以bar结束 E可省略
E[foo*='bar'] foo的属性值包含bar E可省略
UI状态伪类选择器
E:enabled 匹配所以可用的
E:disabled 匹配所以不可用的
E:checked 匹配所有可用的 input:checked 匹配radio和checkbox
2).背景:
background-origin 背景图开始的位置
background-clip 背景色开始的位置
后面的三个值 border-box 从边框开始
padding-box 从padding开始
content-box 从内容开始
background-size 背景图的大小 可以跟具体数字也可以跟百分比 background-size: 50% 50%;占据盒子的50%
background-size: cover 加cover是铺满,拉伸图片来适应div
多个背景图 background:url() no-repeat center center,url() no-repeat center center; 中间用逗号隔开
渐变颜色:
径向渐变： 坐标中心点也可以更换 圆心的坐标是以他所在div左上角的点的坐标来说的
如：background-image:radial-gradient（300px at 150px 0,red,yellow,blue）
参数分别为半径,圆心坐标,颜色
background-image:radial-gradient(150px at center center, #ff4fdb, red)
线性渐变：如：background-image:linear-gradient(0deg, red 25%, yellow 50%, blue 75%, green 100%)
background-image:linear-gradient(45deg,red 25%,green 25%,green 50%,red 50%,red 75%,green 75%,red 100%)
background-image:linear-gradient(to top,red,yellow) ;
参数:起始角度/方向,颜色比例变化
3).边框:
box-sizing: border-box；(默认是border-sizing:content-box);
border-image：source slice width outset repeat|initial|inherit;
其实是这几个的缩写border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat
第一个参数是图片的路径
第二个参数是图片边框向内偏移(上边框向下的偏移量)。
第三个参数是图片边框的宽度。
第四个参数是边框图像区域超出边框的量(下边框向上的偏移量)。
第五个参数是选择stretch拉伸 round适应还是repeat多余截掉等特效 如果第四个参数不给也是默认strech
border-radius:50%/宽高一半 是正圆 规律是看对角线
一个值代表四个方向都一样：border-radius: 20px;
两个值代表 左上和右下20px 右上和左下40px：border-radius: 20px 40px;
三个值代表 左上20px 右上和左下40px 右下60px ：border-radius: 20px 40px 60px;
四个值分别代表左上20px 右上30px 右下40px 左下50px：border-radius: 20px 30px 40px 50px;
四个角分开写如下：
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
box-shadow: h-shadow v-shadow blur spread color inset; (盒子加阴影)
h-shadow是水平偏移量(必选)
v-shadow是垂直偏移量(必选)
blur是模糊程度
spread是模糊尺寸
color是模糊的颜色
inset不设置是默认右下的阴影 如果设置默认是内阴影
如：box-shadow: 3px 3px 15px 20px #ccc inset;
4).文本效果：
文本阴影: text-shadow：水平偏移量 垂直偏移量 模糊度 颜色
如：text-shadow：2px 2px 3px #333；
还有一些新属性:
允许换行: word-wrap:normal/break-word;(浏览器默认/允许长单词换行)
文本换行规则: text-wrap: normal|none|unrestricted|suppress;
文本溢出包含元素时: text-overflow: clip|ellipsis|string;(修剪文本/显示省略号代表修剪的文本/使用给定的字符串代表被修剪的文本)
5).媒体查询：
@media screen and (max-width) and (min-width) 范围
6).多栏布局：
两端对齐：text-align: justify;
字体的高度：column-gap：1.5em； 其中一个em是一个字体的高度
分n栏：column-count：n；
分栏线的设置：column-rule：1px solid #333
7).动画：
过渡： transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。(延迟时间)
如:transition: all 1s linear 2s;
4个属性：变化的属性（width height all） 总时长 过渡函数 延迟时间 （一般情况后俩个省略）
过渡函数：linear匀速 ease-in减速 ease-out加速 ease-in-out先加速后减速
特别的:cubic-bezier(<x1>, <y1>, <x2>, <y2>)X轴取值0到1,以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线
动画： animation-name: change; 动画名字
animation-duration: 5s; 动画总时长
animation-timing-function: linear; 动画函数
animation-delay: 2s; 动画延迟
animation-iteration-count: infinite; 无限循环
animation-direction: alternate; 改变方向
animation-play-state: paused(暂停)\running(播放); 更改播放状态
animation-fill-mode: forwards(最后一帧)\backwards(第一帧); 是停在第一帧还是最后一帧
简写：animation: change 5s 2s linear infinite alternate；
@keyframes change{from{} to{}} 或者 @keyframes change{0%{}...100%{}}
8).2D效果：
倾斜：y轴正值以顺时针旋转，负值以逆时针旋转，x轴正值是逆时针，负值是顺时针，分别绕着x、y进行旋转。
transform: skew(45deg,45deg);
改变旋转中心: 以哪为旋转中心 可以赋值也可以用单词
transform-origin: left top;
旋转：对元素进行旋转，正值为顺时针。负值为逆时针，但是注意旋转以后的坐标值也会跟着转变
transform:rotate(-30deg);
移动：translate里面的两个值分别对应x和y的坐标值，可以是具体的像素值也可以是百分比，相对于它自身原来的位置
transform: translate(0,800px)
缩放：盒子可以放大和缩小，放大为正值，缩小位小数，两个数分别对应x和y的值
transform: scale(4,4)
综合使用：顺序可以颠倒，但是注意旋转以后坐标会改变
transform: translate(0,100px) rotate(45deg) scale(2,2) skew(45deg,45deg);
9).3D转换：
规律：
左手坐标系规则 伸出左手 大拇指和食指成90deg 伸出中指向前 在整体向下
也就形成一个坐标系：也就是x是右边是正方向 y轴向下的是正方向 z轴正方向是面向观众自己的
用左手握住相应的坐标系
大拇指指向正的方向 其余四个手指弯曲的方向就是旋转正值的选转方向
相关属性：
perspective: 800; (perspective一般用在父元素上 称为舞台元素) 这是表示三维的东西距离浏览器的距离(透视)
perspective-origin: center center; 这是代表用户的视觉在浏览器的什么位置
transform-style: preserve-3d; 这是后面的三维物体以三维的形式展示
backface-visibility:hidden; 属性定义当元素不面向屏幕时是否可见。(如果在旋转元素不希望看到其背面时，该属性很有用)
10).伸缩布局：
让父盒子变成伸缩盒子 display:flex;
调整主轴方向（默认为水平方向）
flex-direction: row(默认水平) | column(垂直) | row-reverse(水平反向) | column-reverse(垂直反向);
主轴的子元素横向布局
justify-content: flex-start(起始点对齐) | flex-end(终止点对齐) | center(居中对齐) | space-around(四周环绕) | space-between(两端对齐);
调整侧轴的子元素的对齐方式
align-items: flex-start(侧轴起始点对齐) | flex-end(侧轴终止点对齐) | center(侧轴居中对齐) | stretch(拉伸,不设高时根据内容拉伸);
特殊
align-self 同align-items,可覆盖父元素设置的algin-items，包括flex-start、flex-end、center、stretch align-self:flex-start;
如:父级设置了align-items:flex-start,子元素设置了align-self:center,浏览器显示效果是子元素的设置
flex-wrap:wrap(换行) | nowrap(不换行);
flex-flow：column wrap；是flex-direction和flex-wrap的简写形式
排序：order 直接加数字 order:1; order:2; order:3; 1就排在第一个以此类推
占父盒子比例：flex:1; flex:2; flex:1; 分成4分根据比例分配;
align-content 堆栈排列
可对应用flex-wrap: wrap后产生的换行进行控制， align-content: flex-start;包括flex-start、flex-end、center、space-between、space-around、stretch
css3都有兼容性，都要加前缀-webkit- -moz- -o- -ms-
1).选择器:
主要讲 E:nth-child(序号不是索引号) 第N个位置的E的子元素 li:nth-child(1){}; tr:nth-child(odd/even); 匹配所以表格奇数行/偶数行
E:nth-last-child(n) 倒数第N个位置的E的子元素
CSS2的一些选择器:
E[foo] 属性选择器 E可省略
E[foo='bar'] 属性选择器
E:first-child 该元素的第一个子元素
::after/::before 附着在元素前后的[伪元素],元素不在DOM中生成,是在浏览器渲染引擎渲染CSS的时候画上去的
before和after 和父元素不在一个线性空间内的，而是另一层元素盖在父元素上的。
CSS3的新增选择器
E[foo^='bar'] foo的属性值以bar开始 E可省略
E[foo$='bar'] foo的属性值以bar结束 E可省略
E[foo*='bar'] foo的属性值包含bar E可省略
UI状态伪类选择器
E:enabled 匹配所以可用的
E:disabled 匹配所以不可用的
E:checked 匹配所有可用的 input:checked 匹配radio和checkbox
2).背景:
background-origin 背景图开始的位置
background-clip 背景色开始的位置
后面的三个值 border-box 从边框开始
padding-box 从padding开始
content-box 从内容开始
background-size 背景图的大小 可以跟具体数字也可以跟百分比 background-size: 50% 50%;占据盒子的50%
background-size: cover 加cover是铺满,拉伸图片来适应div
多个背景图 background:url() no-repeat center center,url() no-repeat center center; 中间用逗号隔开
渐变颜色:
径向渐变： 坐标中心点也可以更换 圆心的坐标是以他所在div左上角的点的坐标来说的
如：background-image:radial-gradient（300px at 150px 0,red,yellow,blue）
参数分别为半径,圆心坐标,颜色
background-image:radial-gradient(150px at center center, #ff4fdb, red)
线性渐变：如：background-image:linear-gradient(0deg, red 25%, yellow 50%, blue 75%, green 100%)
background-image:linear-gradient(45deg,red 25%,green 25%,green 50%,red 50%,red 75%,green 75%,red 100%)
background-image:linear-gradient(to top,red,yellow) ;
参数:起始角度/方向,颜色比例变化
3).边框:
box-sizing: border-box；(默认是border-sizing:content-box);
border-image：source slice width outset repeat|initial|inherit;
其实是这几个的缩写border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat
第一个参数是图片的路径
第二个参数是图片边框向内偏移(上边框向下的偏移量)。
第三个参数是图片边框的宽度。
第四个参数是边框图像区域超出边框的量(下边框向上的偏移量)。
第五个参数是选择stretch拉伸 round适应还是repeat多余截掉等特效 如果第四个参数不给也是默认strech
border-radius:50%/宽高一半 是正圆 规律是看对角线
一个值代表四个方向都一样：border-radius: 20px;
两个值代表 左上和右下20px 右上和左下40px：border-radius: 20px 40px;
三个值代表 左上20px 右上和左下40px 右下60px ：border-radius: 20px 40px 60px;
四个值分别代表左上20px 右上30px 右下40px 左下50px：border-radius: 20px 30px 40px 50px;
四个角分开写如下：
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
box-shadow: h-shadow v-shadow blur spread color inset; (盒子加阴影)
h-shadow是水平偏移量(必选)
v-shadow是垂直偏移量(必选)
blur是模糊程度
spread是模糊尺寸
color是模糊的颜色
inset不设置是默认右下的阴影 如果设置默认是内阴影
如：box-shadow: 3px 3px 15px 20px #ccc inset;
4).文本效果：
文本阴影: text-shadow：水平偏移量 垂直偏移量 模糊度 颜色
如：text-shadow：2px 2px 3px #333；
还有一些新属性:
允许换行: word-wrap:normal/break-word;(浏览器默认/允许长单词换行)
文本换行规则: text-wrap: normal|none|unrestricted|suppress;
文本溢出包含元素时: text-overflow: clip|ellipsis|string;(修剪文本/显示省略号代表修剪的文本/使用给定的字符串代表被修剪的文本)
5).媒体查询：
@media screen and (max-width) and (min-width) 范围
6).多栏布局：
两端对齐：text-align: justify;
字体的高度：column-gap：1.5em； 其中一个em是一个字体的高度
分n栏：column-count：n；
分栏线的设置：column-rule：1px solid #333
7).动画：
过渡： transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。(延迟时间)
如:transition: all 1s linear 2s;
4个属性：变化的属性（width height all） 总时长 过渡函数 延迟时间 （一般情况后俩个省略）
过渡函数：linear匀速 ease-in减速 ease-out加速 ease-in-out先加速后减速
特别的:cubic-bezier(<x1>, <y1>, <x2>, <y2>)X轴取值0到1,以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线
动画： animation-name: change; 动画名字
animation-duration: 5s; 动画总时长
animation-timing-function: linear; 动画函数
animation-delay: 2s; 动画延迟
animation-iteration-count: infinite; 无限循环
animation-direction: alternate; 改变方向
animation-play-state: paused(暂停)\running(播放); 更改播放状态
animation-fill-mode: forwards(最后一帧)\backwards(第一帧); 是停在第一帧还是最后一帧
简写：animation: change 5s 2s linear infinite alternate；
@keyframes change{from{} to{}} 或者 @keyframes change{0%{}...100%{}}
8).2D效果：
倾斜：y轴正值以顺时针旋转，负值以逆时针旋转，x轴正值是逆时针，负值是顺时针，分别绕着x、y进行旋转。
transform: skew(45deg,45deg);
改变旋转中心: 以哪为旋转中心 可以赋值也可以用单词
transform-origin: left top;
旋转：对元素进行旋转，正值为顺时针。负值为逆时针，但是注意旋转以后的坐标值也会跟着转变
transform:rotate(-30deg);
移动：translate里面的两个值分别对应x和y的坐标值，可以是具体的像素值也可以是百分比，相对于它自身原来的位置
transform: translate(0,800px)
缩放：盒子可以放大和缩小，放大为正值，缩小位小数，两个数分别对应x和y的值
transform: scale(4,4)
综合使用：顺序可以颠倒，但是注意旋转以后坐标会改变
transform: translate(0,100px) rotate(45deg) scale(2,2) skew(45deg,45deg);
9).3D转换：
规律：
左手坐标系规则 伸出左手 大拇指和食指成90deg 伸出中指向前 在整体向下
也就形成一个坐标系：也就是x是右边是正方向 y轴向下的是正方向 z轴正方向是面向观众自己的
用左手握住相应的坐标系
大拇指指向正的方向 其余四个手指弯曲的方向就是旋转正值的选转方向
相关属性：
perspective: 800; (perspective一般用在父元素上 称为舞台元素) 这是表示三维的东西距离浏览器的距离(透视)
perspective-origin: center center; 这是代表用户的视觉在浏览器的什么位置
transform-style: preserve-3d; 这是后面的三维物体以三维的形式展示
backface-visibility:hidden; 属性定义当元素不面向屏幕时是否可见。(如果在旋转元素不希望看到其背面时，该属性很有用)
10).伸缩布局：
让父盒子变成伸缩盒子 display:flex;
调整主轴方向（默认为水平方向）
flex-direction: row(默认水平) | column(垂直) | row-reverse(水平反向) | column-reverse(垂直反向);
主轴的子元素横向布局
justify-content: flex-start(起始点对齐) | flex-end(终止点对齐) | center(居中对齐) | space-around(四周环绕) | space-between(两端对齐);
调整侧轴的子元素的对齐方式
align-items: flex-start(侧轴起始点对齐) | flex-end(侧轴终止点对齐) | center(侧轴居中对齐) | stretch(拉伸,不设高时根据内容拉伸);
特殊
align-self 同align-items,可覆盖父元素设置的algin-items，包括flex-start、flex-end、center、stretch align-self:flex-start;
如:父级设置了align-items:flex-start,子元素设置了align-self:center,浏览器显示效果是子元素的设置
flex-wrap:wrap(换行) | nowrap(不换行);
flex-flow：column wrap；是flex-direction和flex-wrap的简写形式
排序：order 直接加数字 order:1; order:2; order:3; 1就排在第一个以此类推
占父盒子比例：flex:1; flex:2; flex:1; 分成4分根据比例分配;
align-content 堆栈排列
可对应用flex-wrap: wrap后产生的换行进行控制， align-content: flex-start;包括flex-start、flex-end、center、space-between、space-around、stretch
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
