CSS3新特性

新特性简介

1. 强大的 CSS3 选择器
2. 抛弃图片的视觉效果
3. 盒模型变化（多列布局和弹性盒模型）
4. 阴影效果
5. Web 字体和 Web Font 图标
6. CSS3 过渡与动画交互效果
7. 媒体查询

案例

github.com/Jennie-duo/…

如何查询浏览器市场份额？

tongji.baidu.com/research/

浏览器对CSS3的支持情况：

如何分辨属性是否需要添加浏览器前缀：caniuse.com/

渐进增强和优雅降级

• 渐进增强：先满足大部分浏览器，发布产品后再慢慢地改进每个浏览器的效果，让每个浏览器使用 CSS3 。
• 优雅降级：先满足大部分用户，先改进用户量最多的浏览器，上线后再挨个满足各个浏览器，进行一定的改变

以下以 Chrome 浏览器为主，采用优雅降级的方式

第一章

环境搭建

1. 打开 Chrome 官网 下载 Chrome 浏览器
2. 在 Vscode 编辑器中安装前缀插件:Autoprefixer

伪类选择器

什么是伪类选择器？

不存在于 HTML 中，但是我们用 CSS 的巧妙语法能够选择它们，并对它们进行渲染修饰

动态伪类选择器

• 不存在于 HTML 中，只有我们动态交互的时候,才能使用 CSS 动态伪类选择器，给它们进行样式的渲染。
• 使用最多的是 a 标签，例如 hover、visited、active、link。

UI 元素状态伪类选择器

• 重点是状态两个字，我们在写 HTML 的时候，在一些标签里面是有状态的。
• 例如：文本框 input type=“text”,有 enabled 和 disabled 两种状态。

结构伪类选择器（ CSS3 新增内容）

• 结构伪类选择器的出现大大简化了 HTML 的文本结构，让 HTML 更语义化、更结构化，减少了 class 和 id 的使用，利用我们新增加的这些选择器就能很好的选择重复的标签。
  1. :first-child 选择某个元素的第一个子元素；
  2. :last-child 选择某个元素的最后一个子元素；
  3. :nth-child() 选择某个元素的一个或多个特定的子元素；
     • 隔行换色使用 2n 或 2n+1 参数 。
     • 另：odd 代表奇数行，even 代表偶数行。
     • 选择第 n 个元素后的所有元素，使用 n+5 参数。
     • 每隔 n 行变色使用 （n+1）n +1 参数，n 相当于一个循环。
  4. :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的 最后一个子元素开始算；
  5. :nth-of-type() 选择指定的元素；
     • 和 nth-child 用法类似，但是限定了元素类型。
  6. :nth-last-of-type() 选择指定的元素 从元素的最后一个开始计算；
  7. :first-of-type 选择一个上级元素下的第一个同类子元素；
  8. :last-of-type 选择一个上级元素的最后一个同类子元素；
  9. :only-child 选择的元素是它的父元素的唯一 一个子元素；
  10. :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  11. :empty 选择的元素里面没有任何内容。

生成列表快捷键：ul>li*10>a

伪元素

什么是伪元素？

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素	作用	IE	F	N	W3C
::first-letter	将特殊的样式添加到文本的首字母	5	1	8	1
::first-line	将特殊的样式添加到文本的首行	5	1	8	1
::before	在某元素之前插入某些内容		1.5	8	2
::after	在某元素之后插入某些内容		1.5	8	2

CSS3 之后，为了区别伪类选择器和伪元素，在伪元素前加两个 ::

::before 和 ::after 相当于 在 element 和 content 之间多了两个图层，改善了 CSS 布局能力的不足,且 ::before 和 ::after 属性中必须有 ‘content:’ 属性，content 属性可以为空 ‘’

第二章

CSS3 的变形

用 border-radius 画圆形

Border-radius 的优点：

1. 减少网站的维护工作量
2. 提高网站性能
3. 增加了视觉美观性

 border-top-left-radius: 50%;
 border-top-right-radius: 50%;
 border-bottom-right-radius: 50%;
 border-bottom-left-radius: 50%;
 border-top-left-radius: 100px 50px;// x轴 y轴 
 border-radius:100px 100px 0px 0px;//左上角开始顺时针方向 

画多边形

画三角形和对话效果

用::before 伪元素画一个三角形，然后用相对定位把三角形放在对话框的左边

border-top: 10px solid transparent;
border-left: 0px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #6a6; 

用 Transform 画菱形和平行四边形

Transform 是 2D 或 3D 的变形转换，它允许我们对元素进行四种变化

— 旋转、缩放、移动和倾斜。

transform在浏览器中的兼容性并不高，需要添加前缀

菱形：正方形旋转

.Diamond{
    width: 200px;
    height: 200px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: rotate(45deg);//旋转
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

} 

平行四边形：正方形倾斜

.parallel{
    width: 200px;
    height: 100px;
    background-color: #6a6;
    margin: 100px auto;
    -webkit-transform: skew(0deg,20deg);//倾斜（x轴，y轴）
    -moz-transform: skew(0deg,20deg);
    -ms-transform: skew(0deg,20deg);
    -o-transform: skew(0deg,20deg);
    transform: skew(0deg,20deg);
} 

画五边形和六边形

五边形：将三角形和梯形拼接起来

#test{
    width: 50px;
    height: 50px;
    border-top: 50px solid #f00;
    border-left: 50px solid #0f0;
    border-right: 50px solid #ff0;
    border-bottom: 50px solid #00f;
}

#trapezoid{
    margin: 100px auto;
    width: 54px;
    height: 0px;
    border-top: 50px solid red;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    position: relative;
}

#trapezoid::after{
    content: '';
    width: 0px;
    height: 0px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 35px solid red;
    position: absolute;
    top: -85px;
    left: -18px;
} 

六边形：将长方形上下各拼接一个三角形

#hexagon{
    margin: 100px auto;
    width: 100px;
    height: 55px;
    background-color: red;
    position: relative;
}

#hexagon::before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-bottom: 25px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: -25px;
}
#hexagon::after{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 25px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top: 55px;
} 

星形

五角星：用伪元素画两个三角形并与第一个三角形旋转组合

#star{
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    margin: 150px auto;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
    position: relative;
}

#star::before{
    content: '';
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 80px solid red;
    position: absolute;
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    transform: rotate(-35deg);
    top: -45px;
    left: -65px;
}

#star::after{
    content: '';
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    position: absolute;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);
    top: -3px;
    left: -105px;
} 

六角星：画两个相反方向的三角形并重叠在一起

#sexangle{
    width: 0px;
    height: 0px;
    border-bottom: 100px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    margin: 150px auto;
    position: relative;
}

#sexangle::before{
    content: '';
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    position: absolute;
    top: 35px;
    left: -60px;
} 

曲形

心型： 画两个上边半圆的矩形并旋转重叠在一起

#cardioid{
    margin: 100px auto;
    height: 90px;
    width: 56px;
    background-color: red;
    border-radius: 28px 28px 0 0;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
}

#cardioid::after{
    content: '';
    height: 90px;
    width: 56px;
    background-color: red;
    border-radius: 28px 28px 0 0 ;
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    left: 55px;
} 

蛋型：画一个长方形分别设置border-radius

#egg{
    width: 126px;
    height: 180px;
    background-color: #fa3;
    margin: 100px auto;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;//四个角的x轴/四个角的y轴
   
} 

太极阴阳图：将黑底白框的圆和白底黑框的边组合到一个黑白的圆上

#taiji{
    width: 150px;
    height: 300px;
    margin: 100px auto;
    border-radius: 50%;
    background-color: white;
    border-left: 150px solid black;
    position: relative;
}

#taiji::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid black;
    background-color: white;
    left: -75px;
}

#taiji::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    padding: 25px;
    border-radius: 50%;
    border: 50px solid white;
    background-color: black;
    top: 150px;
    left: -75px;
} 

第三章

CSS3 的颜色

透明属性

制作透明背景层

opacity:value(0-1)|inherit(继承)

#background{
    margin: 100px auto;
    width: 900px;
    height: 600px;
    background-image: url(./img/background.jpeg);
    position: relative;
}
#content{
    position: absolute;
    width: 600px;
    height: 300px;
    background-color: #fff;
    opacity: 0.8;
    top: 150px;
    left: 150px;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    -webkit-box-shadow: 3px 3px 5px #888; //x轴阴影 y轴阴影 阴影的宽度 阴影颜色
    box-shadow: 3px 3px 5px #888;
} 

opacity属性兼容性较好，只有 IE 的几个版本部分支持，其余浏览器均支持，可不加浏览器前缀

颜色模式

rgba(R,G,B,A)

• R:红色值。正整数|百分数
• G:绿色值。正整数|百分数
• B:蓝色值。正整数|百分数
• A:Alpha透明度。取值 0～1 之间

rgba 不会影响文本的颜色，这是符合实际需要的。opacity 更适用于背景透明。

hsla(H,S,L,A)

• H:Hue(色调)。0(或360)表示红色，120 表示绿色，240 表示蓝色，也可取其他数值来指定颜色。取值为: 0 - 360
• S: Saturation(饱和度)。取值为: 0.0% - 100.0%
• L: Lightness(亮度)。取值为: 0.0% - 100.0%
• A:Alpha透明度。取值 0～1 之间

渐变

线性渐变

linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)

• :用角度值指定渐变的方向（或角度）。

• to left:设置渐变为从右到左。相当于: 270deg

• to right:设置渐变为从左到右。相当于: 90deg

• to top:设置渐变为从下到上。相当于: 0deg

• to bottom:设置渐变为从上到下。相当于: 180deg

• <color-stop>: 用于指定渐变的起止颜色

• <color>: 指定颜色

• <length>: 用长度值指定起止色位置。不允许负值

• <percentage>: 用百分比指定起止色位置。

渐变属性只能放在 background-image 下面。IE9 以前的版本不支持

.demo{
    width: 260px;
    height: 200px;
    border: 1px solid black;
    background-image: -webkit-linear-gradient(270deg,orange 30%,green 60%,red 100%);
    background-image: -o-linear-gradient(270deg,orange 30%,green 60%,red 100%);
    background-image: linear-gradient(270deg,orange 30%,green 60%,red 100%);
    background-image: linear-gradient(to left,orange 100px,green 160px,red 260px);
} 

径向渐变

radial-gradient([<bg-position> || <angle>,]?[<shape> || <size>,]? <color-stop>,<color-stop>[,<color-stop>]*);

.demo{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50%;
    margin: 10px;
    float: left;
}
.circle{
    background-image: radial-gradient(20px circle at center,orange,green,red);
}
.ellipse{
    background-image: radial-gradient(20px 30px ellipse at center,orange,green,red);
} 

重复性渐变

添加 repeating 和色标值即可:

.linear{
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background-image: repeating-linear-gradient(red 0px,green 40px,orange 80px);
}
.circle{
    width: 300px;
    height: 300px;
    margin: 20px auto;
    border-radius: 50%;
    background-image: repeating-radial-gradient(red 0px,green 30px,orange 40px);
} 

盒子阴影效果

1. text-shadow
2. box-shadow

box-shadow:h-shadow v-shadow blur spread color inset;

box-shadow: 2px 2px 10px #aaa;

• h-shadow 必需。水平阴影的位置。允许负值。
• v-shadow 必需。垂直阴影的位置。允许负值。
• blur 可选。模糊距离。
• spread 可选。阴影的尺寸。
• color 可选。阴影的颜色。请参阅 css 颜色值。
• inset 可选。将外部阴影（outset）改为内部阴影。

box-shadow 浏览器兼容性不高，需要写前缀。

第四章

CSS3 的过渡属性

Transition

• transition-property:过渡属性(默认值为all)
• transition-duration:过渡持续时间(默认值为0s)
• transition-timiing-function:过渡函数(默认值为ease函数)
• transition-delay:过渡延迟时间(默认值为0s)

过渡属性浏览器支持度不高，还是要谨慎使用的。

.demo{
    width: 100px;
    height: 100px;
    background-color: pink;
    cursor: pointer;
    transition-duration: 2s;
    transition-property: all;
    transition-delay: .2s;
    transition-timing-function: ease;
    //    transition: all 2s .2s ease;
}
.demo:hover{
    width: 300px;
    height: 200px;
    background-color: aquamarine;
    border-radius: 40px;
} 

过渡函数

• ease:-慢-快-慢-
• linear:匀速
• ease-in:先慢后快
• ease-out:先快后慢
• ease-in-out:-慢-快-慢-
• step-start: 一步到位
• step-end: 最后时间一步到位

要求更高时可采用贝塞尔曲线: cubic-bezier.com

简单的过度动画

.m_img img{
    width: 140px;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.main li:hover .m_img img{
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
} 

过渡效果 transition 加在需要过渡的元素上

第五章

CSS3 的动画

动画中的关键帧 @keyframes

.rect{
    width: 100px;
    height: 100px;
    background-color: red;
    position: fixed;
    animation: mymove 3s infinite ;
}
@keyframes mymove{
    //from { top: 0; left: 20%;}
    //to  { top: 0; left: 80%;}
    0% { top: 20%; left: 20%; background-color: red;}
    25%  { top: 20%; left: 80%; background-color: aqua;}
    50% { top: 80%; left: 80%; background-color: aquamarine;}
    75% { top: 80%; left: 20%; background-color: blueviolet;}
    100% { top: 20%; left: 20%; background-color: brown;}
} 

animation 复合属性

animation: name duration timing-function delay iteration-count direction;

• animation-name: 要使用的动画名字
• animation-duration: 动画执行持续时间
• animation-timing-function: 动画过渡函数
• animation-delay: 动画延迟执行时间
• animation-iteration-count: 动画循环次数 有 infinite 参数无限循环
• animation-direction: 动画播放方向 有 normal 和 alternate 参数

animation-name: mymove;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    //animation: mymove 3s ease 1s infinite alternate; 

浏览器支持度仅有 79%，需要写浏览器前缀。

制作复杂的 CSS 动画

栅栏状 loading 动画效果实现

设置动画关键帧后依次延迟不同元素的动画执行时间

.spinner{
    margin: 100px auto;
    width: 60px;
    height: 60px;
    text-align: center;
    font-size: 10px;

}
.spinner > div{
    background-color: #67cf22;
    height: 100%;
    width: 6px;
    display: inline-block;
    animation: loading 1.2s infinite ease;
}

.spinner > div:nth-child(2){
    animation-delay: -1.1s;
}
.spinner > div:nth-child(3){
    animation-delay: -1.0s;
}
.spinner > div:nth-child(4){
    animation-delay: -0.9s;
}
.spinner > div:nth-child(5){
    animation-delay: -0.8s;
}

@keyframes loading{
    0%,40%,100%{transform: scaleY(0.4);}
    20%{transform: scaleY(1);}
} 

水滴状 loading 动画效果实现

.spinner{
    width: 60px;
    height: 60px;
    position: relative;
    margin: 100px auto;
}
.spinner > div{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #67cf22;
    opacity: 0.6;
    position: absolute;
    top: 0px;
    left: 0px;
    animation: loading 2.0s infinite ease-in-out;
}

.spinner > div:nth-child(2){
    animation-delay: -1s; 
}

@keyframes loading{
    0%,100%{transform: scale(0.0);}
    50%{transform: scale(1.0);}
} 

动画延迟时间尽量用负延迟，刷新页面时动画提前执行，动画不会停顿

第六章

文字排版的一些新特性

text-shadow

text-shadow:h-shadow v-shadow blur color;

• h-shadow: x 轴阴影位置
• v-shadow: y 轴阴影位置
• blur: 阴影模糊距离，即阴影的大小
• color: 阴影颜色

body{
    background-color: #666;
    text-align: center;
    font: bold 55px "Microsoft YaHei";
}
.font1{
    color: #fff;
    text-shadow: 0px 0px 20px red;
}
.font2{
    color: #000;
    text-shadow: 0px 1px 1px #fff;
}
.font3{
    color: #fff;
    text-shadow: 1px 1px rgba( 197 , 223 , 248 , 0.8),
                 2px 2px rgba( 197 , 223 , 248 , 0.8),
                 3px 3px rgba( 197 , 223 , 248 , 0.8),
                 4px 4px rgba( 197 , 223 , 248 , 0.8),
                 5px 5px rgba( 197 , 223 , 248 , 0.8),
                 6px 6px rgba( 197 , 223 , 248 , 0.8);
} 

IE10 之前的版本不支持该属性

用 text-overflow 解决文字排版问题

text-overflow: clip|ellipsis|string;

• clip: 需要配合overflow-hidden使用，没有明显效果，和单独使用overflow-hidden效果相同
• ellipsis: 需要配合overflow-hidden和white-space:nowrap(换行）使用，高度变成一行并用 … 表示未显示部分
• string: 大部分浏览器不支持，不建议使用，也很少用到。

.demo{
    margin: 30px auto;
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    height: 50px;
    text-overflow: clip;
    overflow: hidden;
}
.demo1{
    margin: 0px auto;
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; /*自动换行*/
} 

浏览器支持度很高，仅需添加 -webkit- 前缀即可

新的字体单位 rem

• px: 像素单位，非常精准，只跟像素值有关，不跟终端有关。
• em: 为了迎合各种终端的出现，相对于父层的字体来进行缩放。
• rem: 随着 CSS3 的出现，增加了 rem，根据 html 的根字体单位进行换算。

如何在不同终端进行字体变化？

和媒体选择器和弹性布局结合起来，根据不同的终端弹性布局，比如栅格化布局 。