1、CSS3的兼容情况
CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特性。
下面介绍这些私有属性：
Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。
Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。
Presto引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。
Trident引擎浏览器使用“-ms-”作为私有属性，只有IE8以上支持,像IE浏览器。
css:
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
transition:1s;2、新增选择器
2.1 选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器,
h1 + p {
margin-top:50px;
}2.2 匹配选择器
匹配所有在#div元素之后的同级p元素。
div ~ p {
background-color: #f00;
}2.3 属性选择器
| 选择器 | 描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
| [attribute~=value] | 用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。 |
| [attribute|=value] | 用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* [a] 用于选取带有指定属性的元素 */
/* [属性名] */
/* [class]{
color: red;
} */
/* [data-index]{
color: red;
} */
/* [选择器类型='属性值'] 用于选取带有指定属性和值的元素*/
/* [属性名=’属性值] */
/* [data-index='2']{
color: red;
} */
/* [class='box2']{
color: red;
} */
/* [attribute^=value] 匹配属性值以指定值开头的每个元素 */
/* [class^='b']{
color: red;
} */
/* [attribute$=value] 匹配属性值以指定值结尾的每个元素 （字符也可以）*/
/*
[class$='3']{
color: red;
} */
/* [attribute*=value] 匹配属性中包含指定值的每个元素*/
/* 含有某个字符 */
/* [class*='d'] {
color: red;
} */
/* [attribute~=value] 用于选取属性值中（包含）指定词汇的元素 ，还可以空格为分隔符*/
/* [class~='box'] {
color: red;
} */
/* [attribute |=value] 用于选取带有指定值（开头）的属性值的元素 ，还可以连接符为分隔符*/
[class|='box'] {
color: red;
}
</style>
</head>
<body>
<div class="box data-index='1'">box</div>
<div class="box2" data-index="2">box2</div>
<div class="box box3">box box3</div>
<div class="box1-box2-box3" title="">box1 box2 box3</div>
<div class="box-4box5box_4">box-4box5box_4</div>
<div class="box6" title="">box6</div>
<div class="box-1_box2_box-3">box-1 box-2 box-3</div>
</body>
</html>2.4 结构性伪类选择器
2.4.1 整体结构类型
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。
2.4.2 标签结构类型
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
:last-of-type 匹配某个父元素中最后一个某一类型的元素。
2.4.3 指定子元素的序号
:nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以是数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。
:nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。
:nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。
:nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上
2.4.4 其他伪类选择器
:root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。
:empty 指定当元素内容为空白时使用的样式。
:not(selector)排除selector选择器选中的元素，不对它们应用样式解析。
:target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。
2.5 文本选择伪元素
::selection指定当前元素处于选中状态部分的样式。只能向选择器应用少量CSS属性：color、background等。
2.6 表单中使用的状态伪类选择器
:disabled 指定当前元素处于不可用状态时的样式。
:enabled 指定当前元素处于可用状态时的样式。
:checked 指定表单中单选框或复选框处于选中状态时的样式
2.7 权重
!important > 行内样式>ID选择器 > 类选择器|伪类|属性选择器 > 标签> 通配符 > 继承 > 浏览器默认属性
2.8 内容追加伪元素
::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素)
::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素)
a:before{
content: '';
position: absolute;
left: 0;
top: 0;
background-color: #fff200;
width: 100%;
height: 100%;
/* 背景图盖住文字 */
z-index: -1;
transform-origin:bottom left;
transform: rotate(-90deg);
transition: all 1s;
} a::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* background-color: #351435; */
background-color: blue;
z-index: -1;
transform: rotateY(-90deg);
transition: all 1s;
}2.9 JS新增的选择器
querySelector('');
querySelectorAll('');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="box1"></div>
<input type="radio">
</div>
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<script>
// 不用加下标
//获取一个元素
// document.querySelector()
// 获取多个元素
// document.querySelectorAll()
var box =document.querySelector('.box');
console.log(box);
var input =document.querySelector('[type="radio"]');
console.log(input);
// 获取的所有的p
var p = document.querySelectorAll('p');
console.log(p)
</script>
</body>
</html>3. CSS3新增样式属性
3.1 background-image多重背景
3.2 background-image的渐变
渐变配色推荐网站: 渐变配色工具(180种渐变背景)
CSS3 定义了两种类型的渐变（gradients）：
-
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
-
径向渐变（Radial Gradients）- 由它们的中心定义
3.2.1 线性渐变
.content {
/* 线性渐变 background-image:line-gradient(to 方位 , 颜色1 ，颜色2 。。。。。。。。) */
width: 100px;
height: 100px;
background-image: linear-gradient(to left,black,white);
background-image: linear-gradient(to left top,red, pink );
}3.2.2 径向渐变
径向渐变由它的中心定义。
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
/* background-image:redial-gradient(circle 圆形，或者ellipse 表示椭圆形，默认值是 ellipse。 颜色1 颜色2、、、、、) */
/* 从中间为圆心往外扩 */
.content{
width: 200px;
height: 200px;
/* border: 1px solid red; */
background-image: radial-gradient(circle,red,white);
background-image: radial-gradient(circle,#fbc2eb,#a6c1ee);
border-radius: 50%;
}3.3 background-size背景缩放
其参数设置如下：
a) 可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高）
b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多
c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */3.4 CSS3的opacity 属性(透明)
opacity: value|inherit;
| 值 | 描述 |
|---|---|
| value | 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 |
| inherit | 应该从父元素继承 opacity 属性的值。 |
3.5 CSS3的filter(滤镜) 属性
filter 属性定义了元素(通常是<img>)的可视效果
filter: grayscale(100%) | blur(px);
| 值 | 描述 |
|---|---|
| grayscale | 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； |
| blur(px) | 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 |
3.6 hsla() 函数
表示色相-饱和度-亮度（Hue-saturation-lightness）模式。
.box {
width: 200px;
height: 200px;
/* hsla 表示`色相-饱和度-亮度`（Hue-saturation-lightness）模式。 */
/* hsla(颜色值0-360, 饱和度0%-100%,亮度0%-100%, 透明度0-1) */
background-color: hsla(0, 100%, 50%, 1);
}
3.7 calc() 函数
calc() 函数用于动态计算长度值。
calc(expression)
calc(expression)| 值 | 描述 |
|---|---|
| expression | 必须，一个数学表达式，结果将采用运算后的返回值。 |
需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则
3.8 box-sizing盒模型属性
盒模型分为 ： W3C标准盒模型 和 IE盒模型
1.W3C标准盒子（content-box）：
在这种盒模型下，是指块元素box-sizing属性为content-box的盒模型。
我们所说的元素的 width ，实际上只包含 content
盒子总宽度 = margin + border + padding + width
2.IE盒子（border-box）：
又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。
在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border
盒子总宽度= margin + width
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
