一、CSS3是CSS2的升级版本,在CSS2.1的基础上增加了很多强大的功能。
新特性:
1、强大的CSS3选择器
2、抛弃图片的视觉效果,圆角、阴影、渐变、半透明、图片边框,可以通过CSS3实现
3、新增背景功能
4、盒子模型的变化
5、阴影效果
6、多列布局与弹性盒模型布局
7、Web字体与WebFont图标
8、颜色与透明
9、圆角与边框
10、CSS变形
11、CSS过渡与动画交互
12、媒体特性与Response布局
二、盒子模型
1、box-sizing 定义盒子模型的尺寸
值:content-box(默认)/border-box
如果值设为border-box,此时设的高宽即为真实的高宽,包括边框和内边距的高宽。
2、resize 是否允许用户缩放,调节元素尺寸大小
值:none/both/horizontal/vertical
要加上一句overflow:auto
3、outline 给元素周围绘制一条轮廓线
outline-width外廓线宽度
outline-style外廓线风格
outline-color外廓线颜色
outline-offset外廓线的偏移量
4、display 设置盒子如何显示的,值:
none隐藏对象
inline指定元素为内联元素
block指定对象为块元素
table指定对象作为块元素的表格,类同于html标签<table>
....
三、CSS3颜色
1、透明
opacity 检索或设置对象的不透明度,对于尚不支持opacity属性的IE浏览器可以使用IE私有的滤镜属性来实现与opacity相同的效果
值:<number>使用浮点数指定对象的不透明度。值在0-1之间
IE兼容:filter:alpha(opacity=透明值)
2、CSS3颜色模式
(1)rgba(number,number,number,0-1之间的小数)也可以设置颜色的透明度
(2)transform透明
(3)HSL
四、CSS3渐变 渐变就相当于背景图片
1、线性渐变
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
<angle>: 用角度值指定渐变的方向(或角度)。
to left: 设置渐变为从右到左。相当于: 270deg
to right: 设置渐变从左到右。相当于: 90deg
to top: 设置渐变从下到上。相当于: 0deg
to bottom: 设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。 <color-stop> 用于指定渐变的起止颜色:
<color>: 指定颜色。
<length>: 用长度值指定起止色位置。不允许负值
<percentage>: 用百分比指定起止色位置。
渐变一般应用于需要指定颜色的地方。
代码:
background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);/*0度角方向(从下向上)*/
background: linear-gradient(to top left,#000,#fff);/*从右下到左上的渐变*/
2、径向渐变
radial-gradient(shape,size,position,<color-stop>)