CSS3
1.如是说
| prefix | browser | | :——: | :————: | | -webkit- | chrome，safari | | -moz- | mozila | | -ms- | IE | | -o- | opera |
预CPU pre-processor
less/sass ：尔后的可移植性相对较低（即使早已透过sass校对后的.css标识符难以消亡）
cssNext应用程序：用以同时实现许多今后的国际标准的（未全然在数十家应用程序同时实现的）
后CPU post-processor
autoprefixer：补上CSS相容性标识符，因此尔后的可移植性高（即使撤除该应用程序后补上的标识符也跟著手动消亡）
post+应用程序（充分反映可扩展性，200数个）
postCss：用JS同时实现的CSS的抽象化的句法树（AST Abstract Syntax Tree），下面的预CPU和后CPU都是身居该句法树展开同时实现的，因此postCss既算不上是后CPU，也算不上是预CPU，须要相互配合应用程序展开采用同时实现。
2.示例类别（selector）
2.1. 亲密关系形示例（Relationship Selectors）
2.1.1 E + F(css2)
现阶段原素的下两个任一的兄妹原素结点
<style>
/* E + F :现阶段原素的下两个任一的兄妹原素结点*/
div + p{
background-color: red;
}
</style>
<div>div</div>
<span class=“demo”>234</span>
<p class=“demo”>1</p>
<p>2</p>
<p>2</p>
<ul>
<li>
<p>4</p>
</li>
</ul>
div + p的意思是：找到div原素下的下两个兄妹原素结点，看看该原素结点是不是p，很明显不是，div的下两个兄妹原素结点是span，因此，想要匹配第两个p，下面的要改为span + p
2.1.2 E ~ F
现阶段原素的下所有任一的兄妹原素结点
<style>
/* E ~ F :现阶段原素的所有任一的兄妹原素结点*/
div ~ p{
background-color: red;
}
</style>
<div>div</div>
<span class=“demo”>234</span>
<p class=“demo”>1</p>
<p>2</p>
<p>2</p>
<ul>
<li>
<p>4</p>
</li>
</ul>
div ~ p的意思是：找到div原素下的所有的兄妹原素结点p，只要存在兄妹原素结点p，就会被选中
2.1.3 E > F
只选择现阶段原素的直接后代（即子原素），而不选择其它后代的示例。
<style>
/* E + F：现阶段原素下所有任一的子原素结点，不包括孙子结点*/
div > p{
background-color: red;
}
</style>
<div>
<p>222</p>
<p>333<h6><p>hp2</p></h6></p>
<h6><p>hp22</p></h6>
</div>
<span class=“demo”>234</span>
<p class=“demo”>1</p>
<p>2</p>
<p>3</p>
下面的只有div下面的两个p被选中，不包括p里面的后代
2.2. 属性示例（Attribute Selectors）
2.2.1 E[attr~=”val”]（css2）
选择属性的值是用空格分隔的数个单词，其中两个单词的值等于 val的E原素
<style>
div[class~=“a”]{
background-color: green;
}
</style>
<div class=“a “ >111</div>
<div class=“a b”>222</div>
<div class=“aa”>333</div>
下面的第一和第二个div被选中
2.2.2 E[attr|=”val”]
选择属性的值是用连字符”-“分隔的单词，并以 val 开头的E原素，主要用于 lang 属性，比如 “en”、”en-us”、”en-gb” 等
<style>
div[class~=“a”]{
background-color: green;
}
</style>
<div class=“a “ >111</div>
<div class=“a-testb”>222</div>
<div class=“b-test”>333</div>
下面的第二个div被选中
2.2.3 E[attr^=”val”]
选择属性的值以 val 开头的E原素，val 为完整的单词或单词的一部分
<style>
div[class^=“a”]{
background-color: green;
}
</style>
<div class=“a “ >111</div>
<div class=“a-test”>222</div>
<div class=“b-test”>333</div>
下面的第一和第二个div被选中
2.2.4 E[attr$=”val”]
选择属性的值以 val 结尾的E原素，val 为完整的单词或单词的一部分
<style>
div[class$=“t”]{
background-color: green;
}
</style>
<div class=“a “ >111</div>
<div class=“a-test”>222</div>
<div class=“b-test”>333</div>
下面的第二和第三个div被选中
2.2.5 E[attr*=”val”]
选择属性的值包含 val 子字符串的E原素
<style>
div[class$=“-“]{
background-color: green;
}
</style>
<div class=“a “ >111</div>
<div class=“a-test”>222</div>
<div class=“b-test”>333</div>
下面的第二和第三个div被选中
2.3. 伪原素示例（Pseude-Element-Selectors）
2.3.1 E::placeholder
只能改变input框placeholder提示文字的样式，相容性极差
<style>
input::placeholder{
color: green;
}
</style>
<input type=“text” placeholder=“请输入用户名”>
改变placeholder颜色为绿色
2.3.2 E::selection
改变字体选中后的样式，只能设置三个样式：color、background、text-shadow，相容性挺好
<style>
div:nth-of-type(1)::selection{
color: #fff;
background-color: yellow;
}
div:nth-of-type(2)::selection{
color: #fff;
background-color: red;
}
</style>
<div>小黄黄</div>
<div>小红红</div>
2.4 伪类示例
被选择原素的一种状态
2.4.1 E:not(s)、E:root、E:target
E:not(s)
选择将某个原素排除在外
<style>
div:not([class=“demo”]){
background-color: green;
}
</style>
<div class=“demo”>demo1</div>
<div class=“demo”>demo2</div>
<div>demo3</div>
下面表示找出class不为demo的原素结点，第三个被选中
E:root
根示例，在HTML中根是HTML，在XML中根是note
:root{
background-color: green;
}
//在HTML中等价于
html{
background-color: green;
}
E:target
被标记成锚点之后（localtion.hash = xxx），xxx为id
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
<h1>这是标题</h1>
<p><a href=“#news1”>跳转至内容 1</a></p>
<p><a href=“#news2”>跳转至内容 2</a></p>
<p>请点击下面的链接，:target 示例会突出显示现阶段活动的 HTML 锚。</p>
<p id=“news1”><b>内容 1…</b></p>
<p id=“news2”><b>内容 2…</b></p>
<p><b>注释：</b>Internet Explorer 8 以及更早的版本不支持 :target 示例。</p>
案例：点击不同的按钮切换不同的背景色
<style>
:root,
body{
margin: 0;
height: 100%;
}
#red,#green,#gray{
height: 100%;
}
#red{
background-color: red;
}
#green{
background-color: green;
}
#gray{
background-color: gray;
}
div.button-wrapper{
position: absolute;
width: 600px;
height: 400px;
top: 400px;
}
div.button-wrapper a{
text-decoration: none;
color: #fff;
background-color: pink;
font-size: 30px;
border-radius: 3px;
margin: 0 10px;
}
div[id]:not(:target){
display: none;
}
</style>
<div class=“button-wrapper”>
<a href=“#red” class=“bgred”>red</a>
<a href=“#green” class=“bggreen”>green</a>
<a href=“#gray” class=“bggray”>gray</a>
</div>
<div id=“red”></div>
<div id=“green”></div>
<div id=“gray”></div>
div[id]:not(:target)表示找到所有div有id属性的原素并且不等于target的
2.4.2 first-child、last-child、only-child、nth-child、nth-last-child
个这几伪类示例都会考虑其他原素对它们的影响
first-child
示例匹配属于任意原素的第两个子原素的E原素，所谓影响，假设就是如果第两个位置上不是p原素，而是span原素，那么该p原素就不会被选中，即使第两个位置被span原素占了，因此这5个原素都不常用，
<style>
p:first-child{
background-color: red;
}
</style>
<body>
<p>0</p>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<p>4</p>
</body>
上面表示选择属于其父原素的首个子原素的每个
原素，并为其设置样式，下面的0和1都会被选中，0作为父原素body的第两个原素，1作为父原素div的第两个原素
last-child
示例匹配属于任意原素的最后一个子原素的E原素
<style>
p:first-child{
background-color: red;
}
</style>
<body>
<p>0</p>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<p>4</p>
</body>
下面表示选择属于其父原素的最后个子原素的每个
原素，并为其设置样式，下面的3和4都会被选中，3作为父原素body的第两个原素，4作为父原素div的第两个原素
only-child
示例匹配属于任意原素只有两个子原素的E原素
<style>
span:first-child{
background-color: red;
}
div:first-child{
background-color: red;
}
</style>
<body>
<div>
<span>1</span>
<p>2</p>
</div>
</body>
下面表示选择属于其父原素的仅有的两个子原素（div），并为其设置样式，其中body下面的div会被选中，即使只有body下仅有两个原素div，而div下有两个原素。
nth-child(n)
匹配父原素中的第 n 个子原素，原素类别没有限制。n 可以是两个数字，一个关键字，或者两个公式。
<style>
p:nth-child(2n){
background-color:red
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
下面的第二个(2)和第四个(4)会被选中
nth-last-child
逆匹配父原素中的第 n 个子原素，原素类别没有限制。n 可以是两个数字，两个关键字，或者两个公式。
<style>
p:nth-last-child(1){
background-color: red;
}
</style>
<body>
<p>0</p>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<p>4</p>
</body>
下面的几个伪类示例都会考虑其他原素对它们的影响，所谓影响，假设就是如果第两个位置上不是p原素，而是span原素，那么该p原素就不会被选中，即使第两个位置被span原素占了，因此下面这些原素都不常用，
2.4.3 first-of-type、last-of-type、:nth-of-type(n)、nth-last-of-type(n)
first-of-type
匹配原素其父级是特定类别的第两个子原素。
<style>
p:first-of-type{
background-color: red;
}
</style>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<p>7</p>
<p>8</p>
</body>
下面的1和7会被选中，因为对于body来说，第两个p类别的就是7，对于div来说，头两个p类别是1
last-of-type
匹配原素其父级是特定类别的第两个子原素。
<style>
p:last-of-type{
background-color: red;
}
</style>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<p>7</p>
<p>8</p>
</body>
下面的6和8会被选中，即使对于body来说，最后两个p类别的就是8，对于div来说，最后p类别是6
nth-of-type(n)
匹配同类别中的第n个同级兄妹原素。
<style>
p:nth-of-type(1){
background-color: red;
}
</style>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<p>7</p>
<p>8</p>
</body>
下面的1和7会被选中，即使对于body来说，第两个p类别的就是7，对于div来说，头两个p类别是1
nth-last-of-type(n)
匹配同类别中的倒数第n个同级兄妹原素。
<style>
p:nth-last-of-type(1){
background-color: red;
}
</style>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
<p>7</p>
<p>8</p>
</body>
下面的6和8会被选中，即使对于body来说，最后两个p类别的就是8，对于div来说，最后p类别是6
2.4.4 E:empty、checked、disabled、read-only、read-write
E:empty
看原素结点内部是否为空(没有其他结点)，在这里注释结点被认为算不上结点,也是空
<style>
div:empty{
border: 1px solid #000;
height: 100px;
}
</style>
<div><span>123</span></div>
<div></div>
<div>234</div>
<div><!– –></div>
E:checked
匹配每个选中的输入原素（仅适用于单选按钮或复选框）。
<style>
input:checked + span{
background-color: green;
}
input:checked + span::after{
content: “隔壁老王 电话xxx,请务必小心行事”;
color: #fff;
}
</style>
<label for=“”>
两个小惊喜
<input type=“checkbox”>
<span></span>
</label>
下面表示点击复选框时会弹出一段话
E:disabled
匹配每个禁用的的原素（主要用于表单原素）。
<style>
input{
border:1px solid #999
}
input:enabled{
backgroud-color:green
}
input:disabled{
border:1px solid #f20;
backhround-color:#fcc;
box-shadow: 1px 2px 3px #f20
}
</style>
<input type=“text”>
<input type=“text” disable>
E:read-only
用于选取设置了 “readonly” 属性的原素。
<style>
input:read-only{
color:red
}
</style>
<input type=“text”>
<input type=“text” readonly value=“逆只能瞅着，真干不了别的”>
E:read-write
用于匹配可读及可写的原素。
<style>
input:read-write{
color:red
}
</style>
<input type=“text” value=“你别瞅着，有种干点什么”>
<input type=“text” readonly value=“逆只能瞅着，真干不了别的”>
同时实现手风琴和选项卡
3. Border&background
3.1. Border-radius
通过下面的图片我们可以看出，随着圆的水平半径和垂直半径的增大，越来越接近我们定义的盒子的宽高度，当圆的水平半径和垂直半径等于盒子宽高度的一半时，此时该盒子正好容纳两个完整的圆，当圆的水平半径和垂直半径等于盒子宽高度时，此时盒子只能容纳1/4圆的圆
圆半径：盒子长度 = 1:4
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-top-left-radius: 25px 25px;
border: 3px solid #000;
}
</style>
<div></div>
.png)
圆半径：盒子长度 = 1:2
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-top-left-radius: 50px 50px;
border: 3px solid #000;
}
</style>
<div></div>
.png)
圆半径：盒子长度 = 1:1
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
border-top-left-radius: 100px 100px;
border: 3px solid #000;
}
</style>
<div></div>
同时实现两个半圆
<style>
div{
width: 200px;
height: 100px;
background-color: pink;
border-top-left-radius: 100px 100px;
border-top-right-radius: 100px 100px;
border: 3px solid #000;
}
</style>
<div> </div>
由于盒子宽度不能装下两个完整的半圆，因此须要扩大盒子的宽度。
总结
所谓圆角，就是切割盒子的四个角，每两个角对应圆的水平半径和垂直半径，4个角对应圆的4个水平半径和垂直半径，顺序是左上、右上、右下、左下
表示方法有：
1. border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px
border-top-left-radius:10px 10px
border-top-right-radius:20px 20px
border-bottom-right-radius:30px 30px
border-bottom-left-radius:40px 40px
.png)
border-radius:10px 20px 顺序表示是左上、右下 / 右上、左下
border-radius:10px 20px 30px 顺序表示是 左上 / 右上、左下/ 右下
3.2. Border-shadow
box-shadow：[阴影模式] 水平偏移量 垂直偏移量 模糊范围 传播距离 颜色
阴影模式：盒子阴影分为内阴影（inset）和 外阴影(outset)，默认情况下是外阴影
水平偏移量：阴影往左或右偏移，正数往左，负数往右
垂直偏移量：阴影往上或下偏移，正数往下，负数往上
模糊范围（blur）：高斯模糊，阴影的大小是基于原来边框的的位置向边框的两边同时去模糊
传播距离：表示在四个方向扩展阴影的距离
阴影可以同时设置数个，可以用（，）隔开
效果一：发光多彩盒子
.png)
<style>
body{
background-color: #000;
}
div{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid #fff;
top: calc(50% – 50px);
left: calc(50% – 50px);
box-shadow: inset 0px 0px 10px #fff,
0px -3px 10px #f0f,
3px 0px 10px #ff0,
0px 3px 10px #0ff,
-3px 0px 10px #00f;
}
</style>
<div></div>
效果二：阴影重叠之发光彩球
.png)
<style>
body{
background-color: #000;
}
div{
position: absolute;
width: 300px;
height: 300px;
top: calc(50% – 150px);
left: calc(50% – 150px);
border-radius: 50%;
box-shadow: inset 0px 0px 50px #fff,
inset 10px 0px 80px #f0f,
inset -10px 0px 80px #0ff,
inset 10px 0px 150px #f0f,
inset -10px 0px 150px #0ff,
0px 0px 50px #fff,
-10px 0px 80px #f0f,
10px 0px 80px #0ff;
}
</style>
<div></div>
效果三：spread应用之小太阳
.png)
<style>
body{
background-color: #000;
}
div{
position: absolute;
width: 50px;
height: 50px;
left: calc(50% – 25px);
top: calc(50% – 25px);
border-radius: 50%;
border: none;
background-color: #fff;
box-shadow: 0px 0px 100px 50px #fff,
0px 0px 250px 125px #ff0;
}
</style>
<div></div>
效果四：鼠标hover盒子出现阴影和放大
<style>
div{
position: absolute;
width: 100px;
height: 50px;
top: calc(50% – 25px);
left: calc(50% – 50px);
background-color: #fff;
box-shadow: 0px 1px 2px rgba(0,0,0,.1);
transition: all .6s;
}
div::after{
content: “”;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0,0,0,.3);
opacity: 0;
transition: all .6s;
}
div:hover{
transform: scale(1.25,1.25);
}
div:hover::after{
opacity: 1;
}
</style>
<div></div>
总结：背影在文字的下面，在阴影的下面
文字在一切的下面
3.3. Border-image
给border加上背景颜色
border-image-source：给背景添加资源，支持URL引入图片跟渐变色（linear-Gradient(颜色1，颜色2)）默认由上往下填充
border-image-slice：有1到4值，分别是top，right，bottom，left，只能填数字或百分比，顺序是上右下左，不添值的话默认100%。最后还有两个fill值，填了fill最中间的就不会被忽略
情况一：图片为300 X 300; top、right、bottom、left 等于100
.png)
下面的最中间的9会被忽略掉，每个方向对应每个方块展开填充
1：top-left
2：top-right
3：bottom-right
4：bottom-left
5：top-left-right
6：top–right-bottom
7：right-bottom-left
8：top-bottom-left
9：top-right-bottom-left(该区域会被忽略)如果添加了fill该区域就不会被忽略
图片为300 X 300，默认情况：100% 100% 100% 100%
.png)
top-left：整个方块
top-right：整个方块
bottom-right：整个方块
bottom-left：整个方块
5：top-left-right：
6：top–right-bottom
7：right-bottom-left
8：top-bottom-left
border-image-outset：可以让背景图片往外衍生，超出定义的border值，不能为负值，没有效果border-image-width：设置border里面的图片的宽度占整个border宽度的多少，默认为1表示border里面图片的宽度与border的宽度比例为1:1，也可设置px值，如果填auto的话，默认会与slice看齐，如果slice为100，width就为100px，如果不加pxborder-image-repeat：解决5678区域宽度增大的时候这部分的图像如何填充的问题，默认值为stretch，可选值有【stretch|repeat|round|space】，可以同时填两个参数，表示水平的和垂直的stretch：将被分割的图像采用拉伸的方式来填充满边框图像区域repeat：将图片砍半在图像的左右填充round：先拉伸，等到宽度满足达到图像的1.5倍宽度时会复制两个平均放到右边，此时图像会有点压缩感，等到宽度达到图像的2倍时会是两个完整的图像space：不拉伸，拿空白补，等到宽度满足达到图像的2倍宽度时会复制两个平均放到右边联合写法：border-image:source slice width outset repeat;
总结：slice不能写px的原因是在联合写法中易与width混淆，不易区分
3.4. background
background用于设置背景，有数个属性：
background-image
可以添加图片或渐变色作为背景颜色，该属性在CSS2中就存在，在CSS3中新增了可以同时添加多占图片(URL)作为背景图片，用逗号（，）隔开默认下前一张图片的Z-index值大于后面的，会覆盖后面的
应用场景一·：在网速不佳的时候展示占位图片，占位图片一般是像素很低的，等到高清图片加载完后再展示高清图片，前面一张的z-index值大于后面的图片，因此占位图片一般在后面
两个盒子展示两张图片
<style>
div{
position: absolute;
width: 300px;
height: 300px;
border: 1px solid #000;
left: calc(50% – 150px);
top: calc(50% – 150px);
background-image: url(./images/pic2.jpeg),url(./images/pic7.jpeg);
background-size: 150px 300px,150px 300px;
background-repeat: no-repeat;
background-position: 0 0 ,150px 0;
}
</style>
<div></div>
.png)
background-repeat
设置图片难以填充盒子宽度时是否重复图片展示，有个可选值：repeat，no-repeat，repeat-x ,repeat-y，round，space默认repeat。round，space是CSS3新增的值，该属性可以同时添加两个CSS3值，两个代表水平方向的重复处理，两个代表垂直方向的重复处理，如果是CSS2值只能添加两个
repeat-x：仅在X轴方向重复平铺，Y轴留白repeat-y：仅在Y轴方向重复平铺，X轴留白repeat：repeat-x与repeat-y的结合，XY轴都重复平铺no-repeat:round：首先重复平铺图片，如果盒子宽度难以容纳一张新图片时，会拉图片，等到盒子宽度达到可以再容纳一张新图片时再把新图片补进来space：重新重复平铺图片，因此图片与图片之间有空隙，不会拉伸图片，等到各个图片间的水平（或垂直）空隙达到一张图片的宽度时再把新图片补进来background-origin
设置图片展示的起始位置（左上），有3个可选值，content-box，padding-box，border-box，默认padding-box，但没有设置图片展示的结束位置（右下）
<style>
div{
position: absolute;
width: 200px;
height: 200px;
left: calc(50% – 100px);
top: calc(50% – 100px);
background-image: url(./images/pic4.jpeg);
padding: 20px;
border: 20px solid transparent;
background-repeat: no-repeat;
background-origin: padding-box; <!– 默认值 –>
background-clip: border-box; <!– 默认值 –>
}
</style>
<div></div>
.png)
.png)
background-position
设置图片的绝对位置，该属性相对于background-origin的值作为原点展开定位,换句话说origin直接决定了position从哪个地方开始定位，可选值有三种类别：百分比，px，还有center、left、right、top、bottom ，默认值0% 0% ,效果等同于left top
background-clip
设置图片展示的结束位置（右下），有4个可选值，content-box，padding-box，border-box，text，默认border-box，text 表示用文字内容区域 反切背景图片，就是文字颜色用背景填充，该值仅在-webkit-中好使，因此须要相互配合两个属性采用，该属性也是webkit的私有属性
.png)
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-fill-color:transparent;
文字遮罩效果
<style>
.fontBg{
position: absolute;
width: 400px;
height: 200px;
border: 1px solid #000;
left: calc(50% – 200px);
top: calc(50% – 100px);
font-size: 80px;
font-weight: 1000;
text-align: center;
line-height: 200px;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
background-image: url(./images/pic2.jpeg);
background-position: 10px 100px;
transition: all .6s;
}
.fontBg:hover{
background-position: center center;
}
</style>
<div class=“fontBg”>成哥很帅</div>
.png)
background-attachment
设置背景图像相对于容器（盒子）展开定位，不跟容器里的内容文字展开定位，有点类似于相对于视口展开fixed定位，默认值是：scroll
local：背景图片相对于内容区里的文字展开定位
fixed：背景图片相对于视口展开定位，但超出容器后部分依旧会消亡“`html
