CSS3（自学笔记）

结构伪类选择器

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	定义过渡花费的时间，默认是0
transition- 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可以互换。

使用说明

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

补充属性

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

文字阴影text-shadow（CSS3）

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

背景缩放（CSS3）

1. background-size：100px 100px;规定背景图片的大小
2. background-size：100px;如果只有一个值，则另一个值等比例缩放
3. background-size：cover;自动调整缩放比例，直至宽和高都和盒子一样尺寸，等比例缩放，当背景图片是的长大于宽时，会有一部份图片无法显示
4. 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 当翻转时，背面是不可见的