前言：之前自学了一些关于CSS3的知识，在学习过程中也遇到过坑，不过总算磕磕绊绊的学习完了关于CSS3的相关知识，于是最近把之前的笔记和代码整理了一下，也算是一个对CSS3知识的回顾复习吧，也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料，学习的不算系统，所以知识点涵盖的不甚全面，望各位看官不吝指正批评。
CSS3简介
CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
css3现状
- 浏览器支持程度差，需要添加私有前缀
- 移动端支持优于PC端
- 不断改进中
- 应用相对广泛
CSS3新增选择器
1.属性选择器新增
- E[属性名^=值]：从头去匹配这个‘属性 = 对应值’的E元素
- E[属性名$=值]：从尾去匹配这个‘属性 = 对应值’的E元素
- E[属性名*=值]：从任意位置去匹配这个‘属性 = 对应值’的E元素
- E[属性名|=值]：匹配具备该属性的元素，并且属性值以对应值开头并紧接着“-”，如果该属性的属性值仅有匹配值，也能匹配到。
2.伪类选择器
- E：first-child 找到第一个孩子为E的元素
- E：last-child 找到最后一个孩子为E的元素
- E：nth-child（N）找到第N个孩子为E的元素，N以1开始
- E：nth-child（odd）匹配奇数的孩子为E的元素
- E：nth-child（even）匹配偶数的孩子为E的元素
- E：nth-child（3n+1）匹配第3n+1个孩子为E的元素，n从0开始
:nth-of-type使用方法与:nth-child类似。
3.其他选择器
- input:focus{} => 选择获取焦点的表单
- Input:checked{} => 选择被选中的checkbox表单
- input:enabled{} => 选择可操控的表单元素
- input:disabled{} => 选择不可操控的表单
- E:target{} => 选择通过锚点跳转的当前E元素
- E:empty{} => 选择没有子节点的E元素包括文本节点（基本不用）
伪元素before after
作用：渲染一个虚拟的标签插入到当前元素的内部前面或后面
总结：
- 伪元素默认是行内元素，我们可以进行转换，在实践中，我们常用来模拟装饰标签
- 伪元素是虚拟的，不能通过js去获取，但可以用类样式进行覆盖
- 清除浮动的底层原理，就是通过伪元素去清除浮动，节约DOM内存
- content不能省略，即便里面没有内容
- 当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值
- 当伪元素需要hover的效果的时候不能直接hover 需要借助于父级 写法：父级：hover：伪元素
圆角 border-radius
实现元素的圆角化，使用方式与border、padding和margin类似，可以合写，也可以单独设置。
- 一个值设置的是盒子的四个角的水平和垂直半径
- 每个角都可以单独进行设置 其取值顺序是左上 右上 右下 左下顺时针设置
- 可以简写 简写的逻辑跟padding和margin一样
- 单位支持像素，和百分比（参照的是宽度和高度）
- 可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>dcocument</title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时：</h2>
<ul class="test">
<li class="one">提供1个参数<br />border-radius:10px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时：</h2>
<ul class="test2">
<li class="one">提供1个参数<br />border-radius:10px/5px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>
阴影box-shadow
语法 box-shadow：水平偏移 垂直偏移 模糊大小 阴影大小 颜色 阴影
- 第一个值 ：Npx 阴影向水平方向偏移N个像素 正数往右 负数往左
- 第二个值 ：Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上
- 第三个值 ：px 模糊大小
- 第四个值 ：px 阴影尺寸
- 第五个值 ：颜色 默认值是黑色
- 第六个参数： 内外阴影 默认是外阴影 内阴影是inset
- 阴影可以写多个，中间用逗号隔开
- 阴影可以简写，但是需要注意有一些值需要补0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: green;
margin: 10px auto;
}
/* 第一个值 ：Npx 阴影向水平方向偏移N个像素 正数往右 负数往左 */
div:nth-child(1){
box-shadow: -10px 0;
}
/* 第二个值 ：Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上 */
div:nth-child(2){
box-shadow: 0px -10px;
}
div:nth-child(3){
box-shadow: 10px 10px;
}
/* 第三个值 ：羽化大小 （模糊的大小） */
div:nth-child(4){
box-shadow: 10px 10px 50px;
}
/* 第四个值 ：阴影尺寸 */
div:nth-child(5){
box-shadow: 0px 0px 10px 5px;
}
/* 第五个值 ：颜色 默认值是黑色 */
div:nth-child(6){
box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5);
}
/* 第六个值 内外阴影 默认是外阴影 内阴影是inset */
div:nth-child(7){
box-shadow: 0px 0px 10px 5px red inset;
}
/* 阴影可以写多组 用逗号隔开*/
div:nth-child(8){
box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue;
}
div:nth-child(9){
box-shadow: 5px 5px red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
边框图片border-image（了解，有兼容性问题，同时效果难做）
以九宫格的方式来切割图片，然后把每部分图片平铺作为边框。
值说明：
- border-image-source:url('border.png'); 图片路径
- border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀）
- border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）
- 简写：border-image:url('border.png') 26 round;
背景图片系列（重点）
1.背景图片的基准点
background-origin：值
- border-box:忽略边框 直接从边框的起始 0 ，0点平铺
- padding-box:默认值，忽略padding 直接从padding的起始 0 ，0点平铺
- content-box:从内容部分开始平铺 跟padding有关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 800px;
border: 10px dashed #000;
background: url(image/heihei.jpg) 0 0 no-repeat;
/* padding-box 默认取值，从padding的起始点开始平铺 padding的大小不会产生影响*/
/* border-box 从border的起始点开始平铺 border的大小不会产生影响 */
/* content-box 从内容的起始点开始平铺，会留出padding的位置 */
background-origin: content-box;
padding: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.多重背景
背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 800px;
border: 10px dashed #000;
background: url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.背景大小
background-size:值
- 当只有一个值的情况下，宽度实现拉伸，并且高度会保持等比例，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
- 当有两个值的情况下，宽度和高度会分别拉伸到对应的值，可能会变形，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
- contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化，（宽度或高度满足一个即可）
- 在contain的基础上保证不留白，这就是cover的效果（宽度和高度都需要满足）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 800px;
border: 10px dashed #000;
background: url(image/Aatrox_1.jpg) 0 0 no-repeat;
/* 一个值的情况下，宽度会进行拉伸，高度会保持等比例 */
/* 两个值的情况下，宽度和高度都会拉伸，可能会产生变形 */
/* 可以接受百分比 百分比参照的是盒子的宽和高 */
/* contain 当图片的宽度或者是高度有一个达到了最大值，整体停止缩放 可能会带来留白呀*/
/* cover 在contain的基础上，保持不留白，继续放大，知道另外一个边也得到最大值 */
background-size:cover;
/* 预告： background-size会在自适应页面里面用到，在全屏轮播图里面用到 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒子内减box-sizing
之前我们的盒子的实际宽度是 实际宽度 = width + padding + border，而内减属性会自动帮我们减去padding和border值 ，所以用了内减的盒子实际宽度就等于width，至于padding和border的值会自动被width内减掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 10px auto;
}
div:nth-child(2){
padding: 10px;
}
div:nth-child(3){
padding: 10px;
border: 10px solid hotpink;
}
div:nth-child(4){
padding: 10px;
border: 10px solid hotpink;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- 一个盒子真正的实际宽度包括 Border + padding + width
在css3中，可以借助于border-sizing去实现盒子自动内减，有两个值
broder-box
content-box
broder-box 内减掉边框和padding
content-box 是默认值 该是多少就是多少
-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
渐变
1.线性渐变
background:-webkit-linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 10px auto;
/* 线性渐变
语法：background:linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
（1）需要添加私有前缀
（2）第一个参数，起始位置 可以接受方位名词 也可以是一个点
也可以是deg 角度 控制的是渐变线的角度 正值是逆时针，负值是顺时针
（3）颜色 可以是任意颜色
*/
background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.径向渐变
background:-webkit-radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 10px auto;
/* 径向渐变
语法：background:radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);
（1）需要添加私有前缀
（2）第一个参数，起始位置 可以接受方位名词 也可以是一个点
也可以是像素 不接受deg
（3）颜色 可以是任意颜色
*/
background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
总结：
- 两种渐变的参数都是一样的 ，起始位置都接受方位名词
- 线性渐变的起始位置还能接受deg 角度 径向渐变不能接受deg但是接受px
- 需要添加私有前缀
- 颜色位置的取值遵守递增的关系
私有前缀
作用：兼容低版本的一些高级浏览器，或者一些特定的css3属性需要添加私有前缀才起作用 每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性
- 谷歌 苹果：-webkit
- 火狐：-moz-
- IE：-ms-
- o：-o-
注意：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）
添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（例如：background：-webkit-linear-gradient（））
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
