CSS3新特性

一、CSS3简介

浏览器私有前缀

解决浏览器兼容问题，只有加上前缀，才能被识别
box-shadow: 5px 5px 10px red;
-webkit-box-shadow: 5px 5px 10px red; Chrome和Safari
-moz-box-shadow: 5px 5px 10px red; Firefox
-ms-box-shadow: 5px 5px 10px red; IE
-o-box-shadow: 5px 5px 10px red;  Opera

二、新选择器

属性 结构伪类 UI伪类

1、属性选择器

按照元素的属性来选择元素的一种方式
E[attr^=“xxx”] 选择元素E，E的attr属性是以XXX开头的任何字符
E[attr$=“xxx”] 选择元素E，E的attr属性是以xxx结尾的任何字符
E[attr*=“xxx”] 选择元素E，E的attr属性是包含xxx的任何字符        

2、子元素伪类选择器

选择某一个元素下的子元素
（1）:first-child、:last-child、:nth-child(n)、:only-child
E:first-child：选择父元素下的第一个子元素，该子类元素类型为E  第一个元素并且是E类型
E:last-child：选择父元素下的最后一个子元素
E:nth-child(n)：选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd和even
其中n从1开始
E:only-child：选择父元素下唯一的子元素，该父元素只有一个子元素

（2）:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type
E:first-of-type：选择父元素下的第一个E类型的子元素
E:last-of-type：选择父元素下最后一个E类型的子元素
E:nth-of-type(n):选择父元素下的第n个E类型的子元素或奇偶元素
E:only-of-type：选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素

:first-child在选择父元素下的子元素时，不仅要区分元素类型，还要求是第一个子元素。
而:first-of-type在选择父元素下的子元素时，只需要区分元素类型，不要求是第一个子元素

3、UI伪类选择器

针对元素的状态来选择元素的一种伪类选择器
大多针对表单元素，对指定的样式，在默认状态下不起作用，只有当元素处于某种状态时才起
作用
（1）:focus
（2）::selection
（3）:checked
（4）:enabled和:disabled
（5）:read-write和:read-only

:focus获取焦点时候使用的样式
::selection用鼠标选取文字时，会使用的样式
:checked 单选框或复选框被选中时的样式（兼容性很差）
:enabled和:disabled：文本框、单选框等可用或者不可用时的样式
:read-write和:read-only 单行文本框、多行文本框可读写或只读时的样式
Firefox浏览器只能识别带有-moz-前缀的:read-write和:read-only。

4、其他伪类选择器

其他伪类选择器
（1）:root
（2）:empty
（3）:target
（4）:not()

:root 选择HTML页面的根元素，html
：empty选择不包含任何子元素和内容的元素，也就是空元素
：target 选取页面中的某一个target元素，就是id被当成锚点链接来使用的元素
：not()选取某一个元素之外的所有元素
对于“ul li:not(.first)”这个选择器，我们分两步来看：首先.first表示选择class="first"的元素，即第一个li元素。
因此，“ul li:not(.first)”表示选择ul元素下除了第一个li元素之外的所有li元素。

三、文本样式

text-shadow：文本阴影
text-stroke：文本描边
text-overflow：文本溢出
word-wrap：强制换行
@font-face：嵌入字体

1、text-shadow

text-shadow
给文本加阴影，不会覆盖文本内容
text-shadow:x-offset  y-offset  blur  color;
在W3C坐标系中，水平阴影，垂直阴影，模糊距离，阴影颜色
水平阴影可以是px、em、百分比等，值为正，右，为负左；
垂直阴影，为正下，为负上
blur表示阴影模糊程度，值越大，越模糊，不能为负
color：阴影颜色

text-shadow:-1px 0 0 white,   /*向左阴影*/
            0 -1px 0 white,  /*向上阴影*/
            1px 0 0 #333,   /*向右阴影*/
            0 1px 0 #333;   /*向下阴影*/

2、text-stroke

text-stroke
给文字加边框
text-stroke:width color;
Crhome和Firefox这两个浏览器都只能识别-webkit-前缀的text-stroke属性。
color:transparent;表示定义字体颜色为透明

3、text-overflow

text-overflow
当文本超出一定范围时，会以省略号显示，隐藏多余文字，现可定义溢出样式
text-overflow:取值;
属性取值：ellipsis 溢出时，显示省略号，隐藏多余文字
         clip   溢出时，不显示省略号，直接将溢出的文字裁掉
单行文本实现效果的完整语法（固定）
overflow:hidden; 
white-space:nowrap;
text-overflow:ellipsis; 

多行文本：jquery.dotdotdot.js

4、强制换行

强制换行
定义长单词或URL地址是否换行到下一行
word-wrap:取值;
normal 自动换行  break-word 强制换行
word-break:取值;
normal 自动换行 break-all 允许在单词内换行  keep-all 只能在半角空格或连字符处换行
只需要记忆强制换行  
第一个是单词间换行，第二个是单词中换行

5、@font-face

@font-face
嵌入字体
把服务器中的字体文件下载到本地电脑，然后让浏览器端可以显示用户电脑没有安装的字体
@font-face
{
    font-family: 字体名称;
    src:url(文件路径);
}
适合比较小型的字体
 /*定义字体*/
        @font-face
        {
            font-family: myfont;      /*定义字体名称为myfont*/
            src: url("css/font/Horst-Blackletter.ttf");
        }
        div
        {
            font-family:myfont;      /*使用自定义的myfont字体*/
            font-size:60px;
            background-color:#ECE2D6;
            color:#626C3D;
            padding:20px;
        }

四、颜色样式

opacity透明度
RGBA颜色
CSS3渐变

1、opacity

opacity
opacity:数值;
取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明
不仅作用于元素的背景颜色，还作用于内部所有子元素以及文本内容
一般与:hover鼠标移动合用

2、RGBA

RGBA
rgba(R, G, B, A)
红 绿 蓝 透明度
R、G、B这三个可以为整数，取值范围为0~255，也可以为百分比，取值范围为0%~100%。
参数A为透明度，跟opacity属性是一样的，取值范围为0.0~1.0。
设置背景颜色时
RGBA颜色中的透明度也只是针对元素的背景颜色，而不会改变元素内部文本的透明度

设置文字颜色时
透明度只针对文字不改变背景

3、CSS渐变

CSS渐变
线性渐变 径向渐变

线性渐变：一条线上
background:linear-gradient(方向, 开始颜色, 结束颜色)
方向有两种取值：关键字和角度
to top 从上到下等

径向渐变：从内到外的圆形渐变
background:radial-gradient(position, shape size, start-color, stop-color)
圆心位置  形状大小  开始颜色 结束颜色
position一般有两种取值：关键字和px
center 中部 top等
Chrome和Firefox只能识别以-webkit-作为前缀的径向渐变属性
shape size
shape ellipse椭圆形  circle圆形
size：closest-side从圆心到离圆心最近的边 等

五、边框样式

border-radius：圆角效果
box-shadow：边框阴影
border-colors：多色边框
boder-image：边框背景

1、border-radius

border-radius:取值; px em 百分比
border-radius:20px;指的是元素4个角的圆角半径都是20px

半圆：  高度为宽度的一半
 height:50px;
border-radius:50px 50px 0 0; 顺时针

圆：
  width:100px;
            height:100px;
            border:1px solid red;
            border-radius:50px;  

border-radius:x/y; 水平半径x  垂直半径y
（1）border-top-right-radius：右上角
（2）border-bottom-right-radius：右下角
（3）border-bottom-left-radius：左下角
（4）border-top-left-radius：左上角

2、box-shadow

box-shadow:x-offset  y-offset  blur  spread  color  style;
水平 垂直  阴影模糊值半径 阴影大小  颜色  内阴影还是外阴影
style  outser  inset
当x-offset和y-offset都为0时，阴影都是向外发散或者向内发散

box-shadow:左阴影, 上阴影, 下阴影, 右阴影;

3、border-colors

border-top-colors:颜色值;颜色值可多种
border-right-colors:颜色值;
border-bottom-colors:颜色值;
border-left-colors:颜色值;
兼容性不好，很多浏览器不支持
border-width:7px;就说明颜色值可以时七种

4、border-image

border-image属性需要定义3个方面的内容。
（1）图片路径。
（2）切割宽度：四条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。
（3）平铺方式：有3种取值，分别为repeat、round和stretch。
 border-image:url(img/border.png) 30 repeat;
 
 （1）取值为repeat时，表示4条边的小方块会不断重复，超出元素部分将会被剪切掉。
（2）取值为round时，表示4条边的小方块会铺满。为了铺满，边框图片会压缩或拉伸。
（3）取值为stretch时，表示4条边的小方块会拉伸，边长有多长就拉多长。

border-top-image
border-bottom-image
border-left-image
border-right-image

六、背景样式

background-size 背景大小
background-origin背景位置
background-clip背景剪切

1、background-size

背景的大小
background-size:160px 100px;宽高
属性取值：px、em、百分比或者关键字
cover 将背景图片等比缩放填满整个元素
contain 将背景图片等比缩放至某一边紧贴元素边沿为止

2、background-origin

从哪个地方开始平铺的
background-origin:取值;
border-box 从边框开始平铺  padding-box从内边距开始平铺 content-box从内容区开始
background-origin往往都是配合background-position来使用的，
其中background-origin定义background-position相对于什么位置来定位。

3、background-clip

剪切背景图片，相对于开始位置，多余的就没了
background-clip:取值;
border-box 从边框开始  padding-box从内边距开始 content-box从内容区开始


多背景
background:url(img/frame1.png) bottom left no-repeat,
           url(img/frame2.png) top right no-repeat;
           
background:url(img/frame1.png), url(img/frame2.png);
background-position: bottom left, top right;
background-repeat:no-repeat, no-repeat;

七、CSS3变形

七八九是CSS动画

transform属性
其方法
translate() 平移
scale() 缩放
skew() 倾斜
rotate() 旋转

1、translate() 平移

transform: translateX(x);         /*沿X轴方向平移*/
transform: translateY(y);         /*沿Y轴方向平移*/
transform: translate(x, y);        /*沿X轴和Y轴同时平移*/
x，y可以是px，em和百分比   表示移动的距离
正右负左

2、scale() 缩放

transform: scaleX(x);         /*沿X轴方向缩放*/
transform: scaleY(y);         /*沿Y轴方向缩放*/
transform: scale(x, y);        /*沿X轴和Y轴同时缩放*/
当x，y取0~1之间，元素进行缩小；大于1，放大；缩小放大倍数

3、skew() 倾斜

transform: skewX(x);        /*沿X轴方向倾斜*/
transform: skewY(y);        /*沿Y轴方向倾斜*/
transform: skew(x, y);       /*沿X轴和Y轴同时倾斜*/
x,y为度数 
x度数为正，逆时针
y度数为正，顺时针

4、rotate() 旋转

transform: rotate(angle);
参数angle表示元素相对于中心原点旋转的度数，单位为deg。
如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。


中心原点
CSS3的各种变形（平移、缩放、倾斜等）都是以元素的中心原点进行变形的
transform-origin: 取值;
长度值、关键字

八、CSS3过渡

我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内 平滑地过渡到“另一个属性值”，从而来实现动画效果
过程变化 凡是涉及CSS3过渡，我们都是结合:hover伪类

transition: 过渡属性 过渡时间 过渡方式 延迟时间; transition-property:对元素的哪一个属性进行操作
transition-duration：过渡的持续时间 transition-timing-function：过渡的速率方式
transition-delay：过渡的延迟时间

transition-property：取值；
对某个属性值进行操作  
transition-property：height
transition: height 0.5s linear 0s;

transition-duration: 时间;
效果的持续时间
时间，单位为秒，可以取小数

transition-timing-function: 取值;
动画在过渡时间内的速率变化方式
取值
ease：由快到慢，逐渐变慢
linear：匀速
ease-in：速度越来越快，渐显效果
ease-out：速度越来越慢，渐隐效果
ease-in-out：渐显渐隐效果

transition-delay: 时间;
延迟时间
鼠标放上去过了多少秒才会显示效果


transition:all 1s linear 0s;

transition-property:border-radius,background-color;
transition-duration:1s;
transition-timing-function:linear;
transition-delay: 0s;


element
{
    //原始值
    transition: all 1s linear
}
element:hover
{
    //最终值
}
移入时效果两者没有区别，但是如果把transition属性写在普通状态内的话，移出时会有过渡效果；
如果把transition属性写在悬浮状态内的话，移出时没有过渡效果。

九、CSS3动画

animation属性 （1）对于transition属性来说，它只能将元素的某一个属性从一个属性值过渡到另一个属性值。
（2）对于animation属性来说，它可以将元素的某一个属性从第1个属性值过渡到第2个属性值，然后还可以继续过渡到第3个属性值，以此类推。
从上面我们可以清楚地知道：transition属性（即CSS3过渡）只能实现一次性的动画效果，而animation属性（即CSS3动画）可以实现连续性的动画效果。

animation: 动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;
animation-name：对哪一个CSS属性进行操作
animation-duration：动画的持续时间
animation-timing-function：动画的速率方式
animation-delay：动画的延迟时间
animation-iteration-count：动画的播放次数
animation-direction：动画的播放方向，正向还是反向


@keyframes
定义动画
调用动画

定义：
@keyframes 动画名
{
    0%{}
    ……
    100%{}
}

 /*定义动画*/
        @keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        /*调用动画*/
        div:hover
        {
            animation:mycolor 5s linear;
        }


animation-name: 动画名;
@keyframes mycolor   动画名就是mycolor


animation-duration: 时间;


animation-timing-function: 取值; 
动画方式  同上


animation-delay: 时间;
延迟时间 同上


animation-iteration-count: 取值;
播放次数
正整数或者infinite  多少次或无数次



animation-direction: 取值;
动画的播放方向
normal 正方向播放0-100
reverse 反方向播放100-0
alternate 奇数正，偶数反


animation-play-state: 取值;
播放状态
running 播放   paused 暂停

十、多列布局

属性 column-count:列数
column-width:每一列的宽度
column-gap:两列之间的距离
column-rule：两列之间的边框样式
column-span：定义跨列样式

列数
column-count: 取值;
auto：列数由column-width决定
n（正整数）：自动化分为n列
先设置body的宽


列宽
column-width: 取值：
auto 列数由column-count属性决定
长度值：px em 百分比


列间距
column-gap: 取值;
normal 默认
长度值 px em 百分比


边框
column-rule: width style color; 
宽度 样式 颜色



跨列
column-span: 取值;
none 不跨列
all 跨所有列
比如使标题跨所有列显示

十一、滤镜效果

filter: 取值; 美颜滤镜效果
brightness() 亮度
grayscale() 灰度
sepia() 复古
invert()反色
hue-rotate() 旋转（色相）
drop-shadow() 阴影
opacity() 透明度
blur() 模糊度
contrast() 对比度
saturate() 饱和度

filter: brightness(百分比);
其中0%~100%表示减弱图片的亮度，例如0%就是完全黑色。
100%以上表示增强图片的亮度，例如200%就是将亮度提高2倍。


filter: grayscale(百分比)
grayscale()方法的取值是一个百分比，其中0%表示不做任何修改，
100%表示完全灰度（即黑白图片）。


filter: sepia(百分比)
sepia()方法的取值是一个百分比，取值范围为0%~100%。
其中，0%表示没有转换，100%表示复古效果。


filter: invert(百分比)
invert()方法的取值是一个百分比，取值范围为0%~100%。
其中，0%表示没有转换，100%表示反转所有颜色。
反色，指的是将红、绿、蓝3个通道的像素取各自的相反值。


filter: hue-rotate(度数)
色相旋转的滤镜效果
hue-rotate()方法的取值是一个度数，单位为deg（即degree的缩写）。
其中，0deg表示不旋转，360deg表示旋转360°，也就是相当于一个循环。


filter: drop-shadow(x-offset y-offset blur color)
阴影滤镜和边框文字一样


filter: opacity(百分比)
opacity()方法的取值是一个百分比，取值范围为0%~100%。
其中，0%表示完全透明，100%表示完全不透明。


filter: blur(像素)
blur()方法的取值是一个像素值，取值越大，模糊效果越明显。
马赛克


filter: contrast(百分比)
contrast()方法的取值是一个百分比。其中，0%~100%表示减弱对比度，例如0%则是灰度图片。
100%以上表示增强对比度，例如200%表示增强对比度为原来的2倍。


filter: saturate(百分比)
saturate()方法的取值是一个百分比。
其中，0%~100%表示减弱饱和度，100%以上表示增强饱和度。


多种滤镜
filter: 值列表;
在值列表中，两个值之间需要用空格隔开。
filter:brightness(120%) contrast(200%) blur(1px);

十二、弹性盒子模型

flex-grow：定义子元素的放大比例
flex-shrink：定义子元素的缩小比例
flex-basis：定义子元素的宽度 flex上面的复合属性
flex-direction：定义子元素的排列方向
flex-wrap：定义子元素是多行显示还是单行显示
flex-flow：上面的复合属性
order：定义子元素的排列顺序
justify-content：定义子元素在横轴上的对齐方式
align-items：定义子元素在纵轴的对齐方式

在使用弹性盒子模型之前，你必须为父元素定义“display:flex;”或“display:inline-flex;”，
这个父元素才具有弹性盒子模型的特点。
在盒子的影响下，如果子元素之和<父元素，取子元素；如果子元素之和>父元素，按照比例
填充父元素

1、flex-grow

放大比例
flex-grow: 数值;
flex-grow属性取值是一个数值，默认值为0。当取值为0时，表示不索取父元素的剩余空间。
当取值大于0时，表示索取父元素的剩余空间（即子元素放大）。取值越大，索取得越多。

2、flex-shrink

缩小比例
flex-shrink: 数值;
当所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度。
flex-shrink属性取值是一个数值，默认值为1。当取值为0时，表示子元素不缩小。
当取值大于1时，表示子元素按一定的比例缩小。取值越大，缩小得越厉害。

3、flex-basis

定义子元素的宽度
flex-basis: 取值;
flex-basis属性取值有两个：一个是“auto”，即该子元素的宽度是根据内容多少来定的；
另外一个是“长度值”，单位可以为px、em和百分比等。


flex: grow shrink basis;

4、flex-direction

排列方向
flex-direction: 取值;
row 横向排列
row-reverse 横向反向排列
column 纵向排列
column-reverse 纵向反向排列
flex-direction属性是在弹性盒子（即父元素）上定义的。

5、flex-wrap: 取值;

多行显示
nowrap  单行显示，默认
wrap  多行显示，也就是换行显示
wrap-reverse 多行显示，但是是反向


flex-flow: direction wrap;

6、order

子元素排列顺序
order:整数   1，2，3 在不同的元素内

7、justify-content

在横轴上对齐方式
justify-content: 取值;
flex-start  所有子元素在左边
center   所有子元素在中间
flex-end 所有子元素在右边
space-between 所有子元素平均分布
space-around 所有子元素平均分布，但是两边留有一定的间距

8、align-items

纵轴上的对齐方式
align-items: 取值;
flex-start  所有子元素在左边
center   所有子元素在中间
flex-end 所有子元素在右边
baseline 所有子元素在父元素的基线上
strecth  拉伸子元素以适应父元素的高度

十三、其他样式

1、outline属性

定义表单中文本框的轮廓样式
当文本获取焦点时，文本框周围会有一条线，现在可以用此属性改变
outline: width style color;

 input[type="text"]:focus
        {
            outline:1px solid red;
        }

2、重置

property: initial;
重置CSS属性为默认值
属性名：initial

3、calc ()函数

属性: calc(表达式）
其中，我们可以使用calc()函数以计算的方式给元素的width、margin、padding、font-size等来定义属性值。对于calc()函数，有以下5条运算规则。
（1）只能使用加（+）、减（-）、乘（*）和除（/）这4种运算。
（2）可以使用px、em、rem、百分比等单位。
（3）可以混合使用各种单位进行运算。
（4）表达式中有加号（+）和减号（-）时，其前后必须有空格。
（5）表达式中有乘号（*）和除号（/）时，其前后可以没有空格，但建议保留。

3、溢出

overflow-x: 取值;
overflow-y: 取值;
溢出宽度和溢出高度的处理
visible 内容超出时，不剪切内容，也不添加滚动条
hidden 内容超出时，剪切内容，但只显示y轴滚动条而不显示x轴滚动条
scroll 内容超出时，显示所有的滚动条
auto   同上

4、pointer-events属性

是否禁用鼠标点击事件
pointer-events: 取值;
auto 不禁用鼠标单击
none 禁用