前端学习日记10

CSS3新增内容

新增模块：
1、选择器模块
2、边框和背景
3、用户界面
4、渐变
5、动画
6、2d和3d
浏览器私有前缀:
浏览器厂商使用一种方式提前把属性纳为自己的标准,按时该属性还没有成为标准

    前缀: IE                -ms-     -ms-border-radius: 
        chrome和Safari     -webkit-  -webkit-border-radius:
        opera               -o-     
        firefox             -moz-

    自动添加属性私有前缀: autoprefix
        ctrl+shift+p  
        如果属性不是标准,会自动添加私有前缀.
        如果没有添加前缀说明属性已经成为一个标准,每个浏览器都可以识别

新增选择器

1、新增属性选择器

css2 属性选择器:
（1） [attr]： 选中带有attr属性的元素
（2） [attr=val]： 选中带有attr属性并且其属性值为val的元素
（3）[attr~=val]： 选中带有attr属性并且其词列表(有多个属性值)中有一个为val的元素

css3 属性选择器:
（1）[attr^=val]： 选中带有attr属性并且其值是以val字符开头的元素
（2）[attr$=val]： 选中带有attr属性并且其值是以val字符结束的元素
（3）[attr*=val]： 选中带有attr属性并且其值中包含val字符的元素
2、新增状态伪类选择器

（1）:disabled： 选中禁用状态的表单元素
（2）:enabled： 选中可用状态的表单元素
（3） :checked： 选中单多选框被选中的元素
（4）::selection： 选择被选中元素(一般针对鼠标选中文字)

3、新增结构伪类选择器
（1）ele:first-child： 选择ele父元素中得第一个元素
（2）ele:last-child ： 选择ele父元素中得最后一个元素
（3） ele:nth-child(n)： 选择ele父元素中得第n个元素
n值：自然数
2n：选择2的倍数的元素(任何倍数都可以)
-n+4 (1-4)：选择前四个元素
（4）ele:nth-last-child(n) ：选择ele父元素中的倒数第n个元素
（5）ele:first-of-type： 选择ele父元素中类型为ele的第一个元素
（6） ele:last-of-type： 选择ele父元素中类型为ele的最后一个元素
（7）ele:nth-of-type(n)： 选择ele父元素中类型为ele的第n个元素
（8）ele:nth-last-of-type(n) ：选择ele父元素中类型为ele的倒数第n个元素

用户界面

用户界面相关属性：
1、resize： 定义元素是否可拉伸
none：不可以拉伸
both： 两个方向都可以拉伸
vertical： 垂直方向可以拉伸
horizontal： 水平方向可以拉伸
【注】：需要和overflow: hidden | auto | scroll一起使用

2、 box-sizing 定义元素区域的计算方式
content-box ：内容盒子(默认) ——元素实际大小: width+ padding+border
border-box ：边框盒子——元素实际大小 = width

阴影

1、盒子阴影
书写格式——box-shadow: x-shadow y-shadow blur size color inset/outset
x-shadow 水平方向的偏移量
y-shadow 垂直方向的偏移量
blur 模糊距离
size 阴影大小
color 阴影颜色
inset 内阴影 outset 外阴影(默认值)
【注】：阴影不占位，且可以同时设置多个阴影,多个阴影之间逗号隔开

2、文字阴影
书写格式——text-shadow: x-shadow y-shadow blur color;
x-shadow 水平方向偏移量
y-shadow 垂直方向偏移量
blur 模糊距离
color 颜色
【注】：可以同时设置多个阴影,逗号隔开

新增背景属性

1、多背景图
background-image: url(),url()…
可以同时设置多个背景图片,多个图片之间逗号隔开，图片路径越靠前,显示越靠上

2、背景图片大小
background-size:
值可以是具体的像素值，也可以是百分比
【注】：如果只设置一个方向的大小,另一个方向等比缩放

cover ：覆盖，会等比缩放背景图片,直到完全占满整个容器，但背景图片可能不完全显示

contain ：覆盖，等比缩放背景图片,只要一个方向容器被填满就停止缩放，可能容器不可以完全覆盖

3、背景图片铺设位置
background-origin:
content-box ： 内容开始
padding-box ： 内边距开始(默认值)
border-box ： 边框开始

4、背景图片的裁切方式
background-clip:
content-box： 保留内容区域的背景图
border-box ： 保留边框以内区域的背景图
padding-box ： 保留内边距以内区域的背景图

线性渐变

background-image: 渐变
【注】 (把一个渐变当作一个背景图片处理)

1、线性渐变
background-image: linear-gradient()
linear-gradient(to 方向,颜色1 颜色节点,颜色2 颜色节点,颜色3 颜色节点…)
方向: 默认从上往下
top | bottom | left| right

2、重复线性渐变
repeating-linear-gradient(to 方向,颜色1 颜色节点,颜色2 颜色节点,颜色3 颜色节点…)

径向渐变

1、径向渐变:
background-image:radial-gradient(渐变原点,渐变形状,颜色1 颜色结点,颜色2 颜色结点…)
渐变原点(需要加私有前缀): left | top | right | bottom | px | %
渐变形状: ellipse 椭圆 circle 圆形
​
2、 重复径向渐变:
repeating-radial-gradient(渐变原点,渐变形状,颜色1 颜色结点,颜色2 颜色结点…)