CSS3的新特性大致分为以下六类

1.CSS3选择器 
2.CSS3边框与圆角 
3.CSS3背景与渐变 
4.CSS3过渡 
5.CSS3变换 
6.CSS3动画 
下面分别说一说以上六类都有哪些内容

CSS3选择器

1.基本选择器 
基本选择器又分为 
子选择器 
相邻兄弟选择器 
通用兄弟选择器 
群组选择器

2.属性选择器

1.element[attribute] 
为带有attribute属性的元素设置样式 
2.element[attribute='value'] 
为attribute='value'属性的元素设置样式 
3.element[attribute~='value'] 
选择attribute属性值包含 单词value的元素 并设置样式 
4.element[attribute*='value']
选择attribute属性值包含value的元素设置样式 
5.element[attribute^='value']
选择attribute属性值是以value开头的元素 
6.element[attribute$='value']
选择attribute属性值是以value结尾的元素
注意比较3和4的区别

3.伪类选择器

  • 动态伪类

定义:这些伪类并不存在于HTML中,只有当用户和网站交互的时候才能体现出来。 
1.锚点伪类

:link
:visited

2.用户行为伪类

:hover
:active
:focus

3.目标伪类

:target
当我们点击锚点链接时,对应id的元素会显示在视口

4.checked状态伪类

这里我们需要知道checkbox只能设置宽高,不能设置背景和边框,如果想要设置那么我们需要用appearance:none;来清除input的默认样式

  • CSS3结构类:nth选择器

:first-child/last-child
语法 element:first-child 
选择属于父元素的首个/最后一个子元素的每个element元素,注意element为子元素。
:nth-child(n) 
选择某元素下的第n个element元素(n是一个简单的表达式,不能用其他的字母代替),括号里还可以传odd和even两个关键字 
:nth-last-child(n) 
匹配属于某元素下的第n个element子元素,从最后一个子元素开始计数 
:nth-of-type(n) 
语法 element:nth-of-type(n) 
匹配属于父元素的特定类型的第n个子元素,element为指定类型的子元素 
:nth-last-of-type 
匹配属于父元素的特定类型的第n个子元素,从最后一个计数 
:first-of-type/:last-of-type 
匹配属于其父元素的特定类型的首个/最后一个子元素的每个元素 
:only-child 
匹配属于父元素的唯一子元素的每个元素 
:only-of-type
匹配属于其父元素特定类型的唯一子元素的每个元素 
:empty 
匹配没有子元素(包括文本节点)的每个元素

  • 否定选择器:not

定义:匹配非 元素或者选择器 的每个元素
语法:父元素:not(子元素或者选择器) 
例:ul:not(span){}

  • 伪元素(也可以使用:)

element::first-line 
定义:对元素的第一行文本进行设置,只能用于块级元素 
element::first-letter 
定义:用于向文本的首字母设置特殊样式,只能用于块级元素 
element::before 
定义:在元素的内容前面插入新内容,常与content配合使用
element::after 
定义:在元素的内容后面插入新内容,常与content配合使用 
element::selection 
定义:用于设置浏览器中选中文本后的背景色与前景色

伪元素与元素的区别: 
无法通过JS获取其DOM
无法通过浏览器开发者工具直接查看
伪元素默认是 inline 
使用伪元素注意事项: 
1.使用伪元素before,after必须设置content
2.使用伪元素before,after显示背景图,一定要使用display设置为块元素
3.使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle

CSS3边框与圆角

1.CSS3圆角border-radius 
定义:可以为元素添加圆角边框(块元素,行内块元素,行内元素)
属性:
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角 
复合属性:border-radius:
属性值 
四个值:左上角 右上角 右下角 左下角
三个值:左上角 右上角和左下角 右下角
两个值:左上角和右下角 右上角和左下角
一个值:4个角都生效
border-radius中的属性值由两个参数值构成: value1 / value2,值之间用/分隔,value1代表圆角的水平半径,value2代表圆角的垂直半径。

圆形与椭圆:
一旦使用百分比,参照的是元素本身的高度与宽度
当拿50%时,宽等于高为圆形 宽不等于高为椭圆形 
2.盒阴影box-shadow 
定义:可以控制一个或多个下拉阴影的框 
语法:box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影

属性值的介绍:
偏移量:

把元素左上角(0,0)作为基准点,找水
平方向和垂直方向的偏移量
水平: 正值 --- 右 ,负值 --- 左
垂直: 正值 --- 下 ,负值 --- 上

模糊程度:

边界模糊,但是边界线未动
由边界线向外模糊多少像素

扩展程度:

盒子阴影,上下左右都向外扩展多少像素

是否具有内阴影:

inset(默认没有,也就是默认是外阴影)
加上inset,盒子的阴影为内阴影 扩展程度可为负值,但是模糊程度不可以

CSS3背景与渐变

1.CSS3背景

background-image 
语法:
backgroundimage:url('1.jpg),url('2.jpg') 
使用逗号把图片分开 
注意:元素引入多个背景图片,前面图片会覆盖后面的图片 
background-cilp 
定义:指定背景的绘制区域(裁剪) 
语法:
background-cilp:border-box / padding-box / content-box 
属性介绍: 
border-box:背景被裁剪到边框盒(从边框开始绘制背景图片)---默认 
padding-box:背景被裁剪到内边距框(从内边距开始绘制背景图片) 
content-box:背景被裁剪到内容框 
background-origin 
定义:设置背景图像的原始起始位置
语法:
background-origin:border-box / padding-box / content-box(背景图片坐标原点与这三个有关系)
属性的介绍:
border-box:相对于边框来定位 
padding-box:相对于内边距来定位 
content-box:相对于内容框来定位 
另外有一个需要了解 
background-position:定义背景图片的位置,水平与垂直方向上面的偏移量(参考点) 
background-repeat 
定义:设置是否及如何重复背景图像,默认地,背景图像在水平和垂直方向上重复。

属性值:
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置

background-size 
定义:指定背景图像的大小 
语法:
background-size:number / % / cover / contain 
属性介绍: 
number: 宽度 高度(如果只写一个数值,第二个数值默认auto)
百分比: 0% - 100% 之间的任何值,此时的百分比参照于元素div的大小 
cover:将背景图片等比缩放以填满整个容器(最远边),如果高度达到一定比例100%,宽度多出的会溢出,但是,具体那部分溢出取决于定位 
contain:将背景图片等比缩放至某一边紧贴容器边缘为止(最近边),如果图片高度比较小,高度就会有空白区域出现 
复合属性background 
定义:可以在一个声明中设置所有的背景属性
语法:
background:color position size repeat origin clip attachment image; background: #abc center 50% no-repeat content-box content-box fixed url('1.jpg') ,url('2.jpg')...

2.CSS3渐变

定义:可以在两个或者多个指定颜色之间显示平移的过渡

线性渐变 
定义:是沿着一根轴线改变颜色,从起点到终点进行顺序渐变(从一边拉向另一边) 
语法:background:linear-gradient(方向,开始颜色,结束颜色)

  • 方向介绍:

1.方向从上到下(默认) 
background: linear-gradient(red,blue); 
2.方向从左到右 
background: linear-gradient(to right,red,blue);
3.对角 
background: linear-gradient(to right bottom,red,blue); 
4.角度(单位deg) 
background: linear-gradient(角度,red,blue); 
角度说明:0deg 将创建一个从下到上的渐变,90deg将创建一个从左到右的渐变

  • 颜色结点:默认每个颜色均匀分布

background: linear-gradient(red 10%,blue 20%,green 30%,yellow 40%);
从0%到10%,为红色,从10%到20%为红色到蓝色的渐变,从20%到30%为蓝色到绿色的渐变,从30%到40%,为绿色到黄色的渐变,从40%到100%为黄色 
background: linear-gradient(red 10%,blue);
从0%到10%,为红色,从10%到100%为红色到蓝色的渐变 
最后如果不写具体数值,默认到100% 
background: linear-gradient(red,blue 30%);
从0%到30%,为红色到蓝色的渐变
如果第一个不写,默认数值是 0% 
background:lineargradient(rgba(255,0,0,0),rgba(255,0,0,1));
由透明色变为不透明色

  • 重复渐变

示例:background: repeating-linear-gradient(90deg,red 0%,blue 20%);或者 background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%); 
注意:把元素的整体宽度看成100%

径向渐变
定义:从起点到终点,颜色从内向外进行圆形渐变 
语法:background:radial-gradient(形状尺寸,开始颜色,结束颜色)
形状分类: 
circle --- 圆形 
ellipse --- 椭圆形 
注意:当元素的高和宽一样时,参数无论设置哪个,都是圆形

尺寸大小:
closest-side最近边 
background: radial-gradient(closest-side circle,red , blue); 
farthest-side 最远边 
background: radial-gradient(farthest-side circle,red , blue); 
closest-corner最近角 
background: radial-gradient(closest-corner circle,red , blue); 
farthest-corner最远角 
background: radial-gradient(farthest-corner circle,red , blue);

颜色结点: 
例:
background:radial-gradient(circle,red 50% ,blue 70%);
注意:此时的百分比,指的是圆心到元素最远端的距离(角度)

重复渐变 : 
示例: background: repeating-radial-gradient(red 0%,blue 20%);
background: repeating-radial-gradient(red 0%,blue 10%,red 20%);

CSS3过渡

定义:允许css的属性值在一定时间区间内平滑的过渡,在鼠标点击,鼠标滑过或对元素任何改变中触发,并圆滑地以动画形式改变css的属性值。

属性:
1.transition-property属性 
定义:设置对象中的参与过渡的属性
语法:transition-property:none | all | property 
参数说明:
none: 没有属性改变
all : 默认值,所有属性都改变
property: 元素的属性名 width,color等 
2.transition-duration属性 
定义: 设置对象过渡的持续时间 
语法:transition-duration:time 
参数说明:
规定完成过渡效果需要花费的时间,以秒或者毫秒计,默认值0 
3.transition-timing-function属性 
定义:设置对象中过渡的动画类型 
语法:只能使用一个属性值 
参数说明: 
ease:平滑过渡(0--慢--快--慢),默认值 
cubic-bezier(0.25,0.1,0.25,1)
linear:线性过渡(匀速) cubic-bezier(0,0,1,1)
ease-in:慢--快 cubic-bezier(0.42,0,1,1) 
ease-out:快--慢 cubic-bezier(0,0,0.58,1) 
ease-in-out:慢--快--慢 
cubic-bezier(0.42,0,0.58,1) 
贝塞尔曲线 :http://cubic-bezier.com/#.17,... 
4.transition-delay属性 
定义:设置对象延迟的过渡时间 
语法:transition-delay:time 
参数说明:
指定秒或者毫秒数来延迟动画效果的开始,默认是0 
5.transition复合属性 
语法:
transition : property duration timing-function delay; 
参数说明:过渡时间和延迟时间的顺序不能乱

CSS3变换

定义:让一个元素在一个坐标系统中变形,这个属性包含一系列的变形函数,可以移动,旋转,缩放元素。 
语法:transform:none | <transform-function> 默认值是none 
2d变换 
1.rotate()旋转
定义:通过指定一个角度参数,对元素指定一个2D的旋转 
语法:transform:rotate(angle) 单位deg
参数说明:angle指旋转角度,正数表示顺时针旋转,负数表示逆时针旋转
2.translate()平移
定义:根据X轴和Y轴的位置给定参数,使当前元素位置移动 
分类:
translateX() 仅水平方向移动 
语法:transform:translateX() 单位px
translateY() 仅垂直方向移动 
语法:transform:translateY() 单位px
translate(x,y) 水平方向和垂直方向同时移动
语法:transform:translate( X, Y) 单位px 
注意:如果只写一个参数,第二个默认是0,也就是只设置了水平方向上的位移 
3.scale( )缩放 
定义:设置元素的缩放程度 
分类:
scaleX( ) 仅水平方向缩放 
语法:transform:scaleX() 没有单位 
scaleY( ) 仅垂直方向缩放 
子主题 语法:transform:scaleY() 没有单位 
scale(x,y) 使元素水平和垂直方向同时缩放 
语法:transform:scale(x,y) 没有单位 
4.skew()扭曲/倾斜 
定义:设置元素的倾斜状态 
分类:
skewX( ) 仅使元素在水平方向上扭曲变形 单位deg 正值 ----逆时针 
skewY( ) 仅使元素在垂直方向上扭曲变形 单位deg 正值 ----顺时针 
skew( ) 使元素在水平方向和垂直方向上扭曲变形 单位deg
注意:0deg与180deg 效果一样 
5.变换基点 
定义:元素变换的基准点 
语法: transform-origin:水平方向 垂直方向 
参数说明: 
left top 左上角 ----四个角均可以
25% top 
50px 50px 
默认值: 
rotate 几何中心点 
skew 几何中心点
scale 几何中心点 
translate 本身位置

3d变换 
1.开启3d空间transform-style: preserve-3d; 一般给父元素开启 
2.子元素设置3d变换效果
rotate 
rotateX() 
定义:指对象在X轴上的旋转角度(变换基点: 50% 50% 0) 
rotateY() 
定义:指对象在Y轴上的旋转角度(变换基点: 50% 50% 0) 
rotateZ() 
定义:指对象在Z轴上的旋转角度(变换基点: 50% 50% 0) 
translate 
translateZ() 
定义:指对象在Z轴上面的平移(变换基点: 50% 50% 0) 
scale 
scaleZ() 
定义:指定对象的Z轴缩放(变换基点: 50% 50% 0)(无太大意义,开启3d空间)

3.设置景深:实现近大远小 
父元素子元素都可以设置 
父元素:perspective: 300px; 
子元素:
transform:perspective(300px) translateZ(-200px);
注意:景深:可选值:大于或等于0,景深值越大,元素看起来越大 
默认值: 0 -- 没有景深 (不能为负值)

4.变换基点 
默认值: 50% 50% 0 
transform-origin: top; 关键字表示 ( 50% 0 0 ) 
注意:立体3d盒子 Z:只能使用具体的长度,不能使用百分比和关键字

5.景深中心点:改变观察者视角 
perspective-origin: top;
perspective-origin: top right;

6.元素背面可见还是不可见
backface-visibility:visible ;(默认值:可见) 
backface-visibility: hidden; 不可见

CSS3动画

定义:使元素从一种样式逐渐变化到另外一种样式的效果 
@keyframes 
定义:keyframes关键帧,用来决定动画变化的关键位置 
注意:keyframes 控制关键位置,并不是所有的位置

语法:@keyframes  animationname{
keyframes-selector{
cssStyles;
}
}

animationname:必写项,定义动画的名称 
keyframes-selector:必写项,动画持续时间的百分比 0% - 100%之间, 或者使用form和to关键字也可以设置,form代表0%,to代表100% 
示例:

  @keyframes abc {
from{transform: rotate(0)}
50%{transform:rotate(90deg)}
to{transform: rotate(360deg)}
}

animation属性 
1.animation-name属性 
设置对象所应用的动画名称 
语法:
animation-name:keyframename | none
参数说明:
keyframename:指定要绑定到选择器的关键帧的动画名称 
2.animation-duration属性 
定义:设置对象动画的持续时间 
语法:animation-duration:time 
参数说明:指定对象播放完成需要花费的时间,默认值是0 
3.animation-timing-function属性 
定义:设置对象动画的过渡类型 
参数说明:与transition-timing-function属性的参数一样 
4.animation-delay属性 
定义:设置动画的延迟时间 
语法:animation-delay:time 
参数说明:可选值,定义动画开始前等待的时间,以秒或者毫秒数计数,默认值是0 
5.animation-iteration-count属性 
定义:设置对象动画的循环次数 
语法:animation-iteration-count : infinite | number 
参数说明:
number为数字,其默认值是1 
infinite:无限循环次数 
6.animation-direction属性 
定义:设置对象动画是否反向运动 
语法:
animation-direction:normal , reverse , alternate , alternate-reverse 
参数说明:
normal : 正常方向 
reverse :反向运动 
alternate : 先正常运动在反向运动,并持续交替运行, 需要配合循环属性使用 
alternate-reverse : 先反向运动在正常运动,并持续交替运行, 需要配合循环属性使用 
7.animation-play-state属性 
定义:指定对象是否正在运行或已暂停 
语法:animation-play-state:paused | running 
参数说明: 
paused : 指定暂停动画 
running : 默认值,制定正在运行的动画 
示例:鼠标移动到box上暂停动画

  #box:hover{
animation-play-state: paused;
}

8.animation-fill-mode
设置动画结束后的状态
none:默认值。不设置对象动画之外的状态,DOM未进行动画前状态
forwards:设置对象状态为动画结束时的状态,100%或to时,当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
backwards:设置对象状态为动画开始时的状态,(测试显示DOM未进行动画前状态)
both:设置对象状态为动画结束或开始的状态,结束时状态优先
9.animation复合属性(不推荐使用 ) 
语法:
animation : name duration timing-function delay interation-count direction play-state

注意:在css3里面,给元素设置圆角、阴影、变换等属性时,尽管外形位置发生改变,但是元素本身大小和位置不变

css 3 新特性的更多相关文章

  1. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  2. css的新特性 calc () 使用

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  3. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  4. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  5. 任务十二:学习CSS 3的新特性

    任务目的 学习了解 CSS 3 都有哪些新特性,并选取其中一些进行实战小练习 任务描述 实现 示例图(点击查看) 中的几个例子 实现单双行列不同颜色,且前三行特殊表示的表格 实现正常状态和focus状 ...

  6. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) ...

  7. 奇妙的CSS之CSS3新特性总结

    随着CSS3标准的发布,越来越多的浏览器开始支持最新的CSS标准,虽然还有些新特性支持的不够完美,但相信未来的浏览器一定会完全支持CSS3的,毕竟这代表着大趋势!下面l列出来一些CSS3中出现的新特性 ...

  8. 2017 css新特性

    2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...

  9. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

随机推荐

  1. YY前端课程5-6

    第五次课内容: 1. 要注意标签的层次,运用缩进indent,使HTML结构清晰,增加可读性accessible 2. HTML布局网页,CSS显示样式(CSS是用来美化HTML标签的) 3. 开放标 ...

  2. EF CodeFirst 如何通过配置自动创建数据库&lt;当模型改变时&gt;

    最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精    本篇为进阶篇,也是弥补自己之前没搞明白的地方,惭愧 ...

  3. centos apache源码安装过程记录

    1.下载相关源文件 wget http://mirror.bjtu.edu.cn/apache/httpd/httpd-2.4.18.tar.gzwget http://mirrors.hust.ed ...

  4. AJAX,JSON用户名校验

    效果 开发结构 1,src部分有两个包dao和servlet 1.1dao包下有两个数据库工具类文件 SqlHelper.java package org.guangsoft.dao; import ...

  5. HDU1632+半平面交

    模板题 题意:给定两个凸多边形,求出合并后的面积,这个合并后的面积不包括重叠部分. #include<stdio.h> #include<string.h> #include& ...

  6. eclipse-SDK-3.7-win32;eclipse-java-indigo-win32;eclipse-jee-indigo-win32 区别(ZZ)

    eclipse-SDK-3.7-win32:eclipse-java-indigo-win32:eclipse-jee-indigo-win32 三个都是用于win32,即windows系统的32位机 ...

  7. GitLab一键式安装bitnami

    https://bitnami.com/stack/gitlab/installer https://bitnami.com/redirect/to/96764/bitnami-gitlab-8.5. ...

  8. 常用接口简析2---IComparable和IComparer接口的简析

    常用接口的解析(链接) 1.IEnumerable深入解析 2.IEnumerable.IEnumerator接口解析 3.IList.IList接口解析 默认情况下,对象的Equals(object ...

  9. vue-router动态路由 刷新页面 静态资源没有加载的原因

    在做项目的时候,发现刷新页面的时候,静态路由没有加载,度娘了一圈,终于解决了. vue-router使用history模式+使用嵌套路由: 访问路由和嵌套路由页面,显示正常,但是刷新页面的时候,嵌套路 ...

  10. 初识dubbo

    1. 为什么需要 Dubbo(摘自http://dubbo.apache.org/zh-cn/docs/user/quick-start.html) 随着互联网的发展,网站应用的规模不断扩大,常规的垂 ...