文章目录

结构伪类选择器属性 选择器伪元素选择器css3盒子模型过渡（transition）2D变形（transform）移动translate(x,y）缩放scale(x,y)旋转rotate(deg)transform-origin可以调整元素变形转换的原点倾斜skew(deg,deg) 动画（CSS3）animation伸缩布局（CSS3）使用说明补充属性 文字阴影text-shadow（CSS3）背景缩放（CSS3）游览器前缀（CSS3）背景渐变（CSS3）多背景（CSS3）盒子半透明（CSS3）3D变形（CSS3）transform透视（perspective）backface-visibility

结构伪类选择器

ul li:fist-child :选取属于其父元素的首个子元素的 选择器 ul li:last-child :选取属于其父元素的最后一个子元素的 选择器 ul li:nth-child(n) :匹配属于其父元素的第N个子元素 ul li:nth-child(even) :选择偶数 ul li:nth-child(odd) :选择奇数 选择的是li

属性 选择器

div[class^=font]{/*选择以font开头的*/ color:red; } div[class$=font]{/*选择以font结尾的*/ color:red; } div[class*=font]{/*选择只要有font的*/ color:red; }

伪元素选择器

p::first-letter {/*选择第一个字 */ font-size:50px; } p::first-line {/*选择第一行 */ font-size:50px; } p::selection {/*选择文字时候的状态*/ background-color :pink; color:purple; } div::before（after） {/*必须带一个属性content，表示在盒子内部前(后)面插入；before(after)是一个（行内）盒子*/ content:"文字" }

css3盒子模型

当盒子指定宽高后，在添加padding，border等值是会撑开盒子

width: 300px; height: 300px; padding; 10px; borde: 5px solid #ccc; box-sizing: border-box;/*加上这句话后,border和padding不会撑开盒子，从外加改为内减模式*/

一张图片实现鼠标放在上面内侧出现边框

<style> div { width:200px; height:120px; position:"relative"; } div:hover::after { content:""; width:100%; height:100%; position:"absolute"; left:0; top:0; border: 1px solid #ccc; box-sizing: border-box; } </style> <div> <img src="地址"> </div>

过渡（transition）

在css3里使用transition可以实现补间动画（过渡效果），写在要变得元素中

transition:要过渡的属性，花费时间，运动曲线，何时开始 如有多组属性变化，用逗号隔开 如果所有属性都要变化写个all即可

属性描述transition简写属性，用于在一个属性中设置4个过渡属性transition-property规定应用过度的css属性transition-duration定义过渡花费的时间，默认是0transition- timing-function定义过渡效果的时间曲线，默认是ease（先慢，后快，最后慢），linear(匀速)transition-delay定义过渡效果何时开始，默认是0

2D变形（transform）

transform是css3中具有颠覆性的特征之一，可实现元素的位移，旋转，倾斜，缩放

移动translate(x,y）

transform:translate(50px,50px) <!-- 将元素或图片在水平和垂直方向上平移50像素， 可以改变元素的位置，x y可以只负值，只写一个值默认是x轴的移动--> transform:translate(x,y):x,y轴同时移动 transform:translatex(x):x轴移动 transform:translatey(y):y轴移动 transform:translate(50%,50%):x,y轴移动自身的50%

缩放scale(x,y)

transform:scale(0.8,0.8) <!-- 将元素或图片在水平和垂直方向上缩小20%， 可以改变元素的大小，，只写一个值默认是水平和垂直同时缩放--> transform:scale(x,y):x,y轴同时缩放 transform:scalex(x):x轴缩放 transform:scaley(y):y轴缩放

旋转rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针

transform:ratate(45deg）<!-- raotate和值之间不能够有空格 -->

transform-origin可以调整元素变形转换的原点

transform-origin:(right,bottom) <!-- 设置旋转中心点为右下角点-->

倾斜skew(deg,deg)

transform:skew(10edg,50edg)<!-- 使用方法与translate相同-->

动画（CSS3）animation

语法格式：

animation:动画名称、动画花费时间、运动曲线、合适开始、播放次数、是否反方向

> /*调用动画*/ > animation:动画名称、动画花费时间、运动曲线、 > 合适开始、播放次数、是否反方向; > animation:move 3s sase 0s 3 normal > /*声明动画(格式)*/ > @keyframes move(动画名称) { > from（等同0%）{ > > } > to（等同100%） { > > } > } 属性描述animation-name规定动画的名称animation-duration动画完成一个周期花费的时间animation-timimg-function速度曲线，默认是"ease（先慢，后快，最后慢），Linear（匀速）"animation-delay何止开始animation-iteration-count动画被播放次数，默认是1；(infinite :规定动画无限次播放)animation-direction动画在下一周期是否逆向播放，默认normal （alternate：动画应该轮流反向播放）

伸缩布局（CSS3）

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

如下图：

**主轴：**Flex容器的主轴主要用来配置Flex项目，默认是水平方向

**侧轴：**与主轴垂直的轴称作侧轴，默认是垂直方向的

**方向：**默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

使用说明

指定一个父盒子为伸缩盒子，即指定：display: flex明确你需要的主侧轴方向，并设置flex-direction 默认是row ，纵向是column

补充属性

min-width: ;(设置最小缩放宽度) max-width: ;(设置最大缩放宽度)

文字阴影text-shadow（CSS3）

值描述h-shadow水平阴影v-shadow垂直阴影blur模糊距离color阴影颜色

背景缩放（CSS3）

background-size：100px 100px;规定背景图片的大小background-size：100px;如果只有一个值，则另一个值等比例缩放background-size：cover;自动调整缩放比例，直至宽和高都和盒子一样尺寸，等比例缩放，当背景图片是的长大于宽时，会有一部份图片无法显示background-size：contain;自动调整缩放比例，宽和高其一和盒子一样尺寸时，不再继续放大，保证图片完整显示在盒子中，

游览器前缀（CSS3）

游览器前缀前缀-webkit-Google Chrome、Safari、Android Browser-moz-Firefox-o-Opera-ms-IE

背景渐变（CSS3）

语法格式：

background:-webkit-linear-gradient(起始位置，开始颜色，结束颜色) background:-webkit-linear-gradient(left，green，red)/*只有加上如“-webkit-”这类游览器内核前缀的， 才能使用起始位置*/ background:linear-gradient(终点位置，颜色 位置，颜色 位置，...) background:linear-gradient(to left，red 0%，green 50%,blue 100%)/* 颜色和位置之间用空格隔开， 三个属性之间用逗号隔开*/ background:-webkit-linear-gradient(起始位置，颜色 位置，颜色 位置，...) background:-webkit-linear-gradient(90deg，red 0%，green 50%,blue 100%)

角度： 参考链接：CSS3渐变 linear-gradient角度垂直向上方向是0度，顺时针方向选中与垂直向上形成的夹角是角度。

多背景（CSS3）

一个元素可以设置多重背景图像每组属性间用逗号分隔如果设置的多重背景图片之间存在交集（即重叠状况），前面的背景图会被后面的背景图覆盖 background:url(图片地址) 背景平铺 背景位置 ，url(图片地址) 背景平铺 背景位置 ； background-color:red;/*多背景，背景颜色要写在背景之后，不能用背景连写，和写到背景之前*/

盒子半透明（CSS3）

opacity: ;/*盒子半透明*/

3D变形（CSS3）transform

2d x y 3d x y z

rotateX():沿着x轴立体旋转rotateY():沿着y轴立体旋转rotateZ():沿着z轴立体旋转

透视（perspective）

透视原理：近大远小；游览器透视：把近大远小的所有图像透视在屏幕上；perspective:视距，表示视点距离屏幕的长短，视点用于模拟透视效果是人眼的位置；

perspective，一般作为一个属性，设置给父元素，作用于所有3D转换的子盒子 视距：眼睛到屏幕的距离

backface-visibility

backface-vidibility属性定义当元素不面向屏幕时是否可见

属性值描述visible当翻转时，背面是可见的hidden当翻转时，背面是不可见的

visible 当翻转时，背面是可见的 hidden 当翻转时，背面是不可见的