CSS3

div>p: 子代
div+p: div后面相邻的第一个p
div~p: div后面所有的兄弟p

1、属性选择器:
id选择器 # 通过id 来选择
类名选择器 . 通过类名来选择
属性选择器 [] 通过标签属性来选择器

语法:
标志性符号:[]
^: 开头  $:结尾  *:包含
E[title]  : 选中页面的E元素,并且E需要带有title属性
E[title="abc"] :选中页面的E元素,并且E需要带有title属性,属性值为abc
E[title^="abc"] :选中页面的E元素,并且E需要带有title属性,属性值以abc开头
E[title$="abc"] :选中页面的E元素,并且E需要带有title属性,属性值以abc结尾
E[title*="abc"] :选中页面的E元素,并且E需要带有title属性,属性值包含abc

结构伪类选择器:
   E:first-child 选中父元素中的第一个子元素
   E:last-child 选中父元素中的最后一个子元素
   E:nth-child(1) 选中父元素中的第5个子元素
    n: 0,1,2,3,4。。。
    偶数: 2n  even
    奇数:2n-1 odd
    前5个: -n+5
  E:nth-last-child(3): 从后向前选择, 选中倒数第3个

  div:nth-child(9)

  注意:所选到的元素的类型 必须是指定的类型E,否则选择无效;

 E:empty 表示元素为空的状态
 E:target: 表示元素被激活的状态  要配合锚点使用

 伪元素:
    通过css模拟出html效果
    E::before
    E::after  必须有content 属性

伪元素选择器:
        E::first-letter 选中第一个字母
        E::first-line选中第一行
        E::selection: 表示选择的区域 通过设置 color  background

CSS3中新增了两种颜色模式:

RGBA:     red  green blue (0-255)   alpha: 透明度 (0-1)

HSLA:
    H:色调  0-360
    S:饱和度 0%-100%
    L:亮度    0%-100%
    A:alpha 透明度 0-1


盒子模型:
    三个盒子: content-box   padding-box  border-box
    box-sizing: border-box(内减模式)border-box(内减模式) /content-box(外加模式)(默认值)

   box-sizing: border-box   盒模型

 私有化前缀:
     浏览器私有化前缀:
        -webkit-: 谷歌 苹果
        -moz-:火狐
        -ms-:ie
        -o-:欧朋

CSS3简介

如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
CSS3的现状
1、浏览器支持程度差,需要添加私有前缀
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
-webkit-border-radius radius 半径

如何对待
1、坚持渐进增强原则
2、考虑用户群体
3、遵照产品的方案
4、听Boss的
准备工作
统一环境
由于CSS3兼容性问题的普遍存在,为了避免因兼容性带来的干扰,我们约定统一的环境,以保证学习的效率,在最后会单独说明兼容性的问题。
1、Chrome浏览器 version 46+
2、Firefox浏览器 firefox 42+
如何使用手册
学会使用工具,可以让我们事半功倍。
[] 表示全部可选项 padding
|| 表示或者
| 表示多选一
? 表示0个或者1个

  •   表示0个或者多个
    

{} 表示范围
学会查看手册,培养自主学习能力。
基础知识
选择器
CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性选择器
其特点是通过属性来选择元素,具体有以下5种形式:
E[attr] 表示存在attr属性即可;
div[class]
2、E[attr=val] 表示属性值完全等于val;
div[class=mydemo]
3、E[attr=val] 表示的属性值里包含val字符并且在“任意”位置;
div[class
=mydemo]
4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置;
div[class^=mydemo]
5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置;
div[class$=demos]
案例 配合jQuery 的过滤选择器

伪类选择器
除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。
1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
重点理解通过E来确定元素的父元素。
E:first-child第一个子元素
E:last-child最后一个子元素
E:nth-child(n) 第n个子元素,计算方法是E元素的全部兄弟元素;
div>ul>li:nth-child(3){ color: deeppink;
}
第三个元素
E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算;
div>ul>li:last-child(2){ color: deeppink;
}
n遵循线性变化,其取值0、1、2、3、4、... 但是当n<=0时,选取无效。
选中所有的奇数的li li:nth-child(2n-1){ color: red; } 选中所有的7 的倍数的li
li:nth-child(7n){ color: red; } 选中前面五个 li:nth-child(-1n+5){ color: red; } 选中后面五个 li:nth-last-child(-1n+5){
color: red; } 所有的偶数 li:nth-child(even){ color:red } 所有的奇数 li:nth-child(odd){ color:blue; }

n可是多种形式:nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等;
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
没有任何的子元素,包括空格.
案例:日历图.
2、目标伪类
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
<li><a href="#title1">CSS (层叠样式表)</a></li>
<h2 id="title1">CSS (层叠样式表)</h2>
h2:target{
color:red;
}
图片切换
伪元素选择器
重点:E::before、E::after
是一个行内元素,需要转换成块元素
E:after、E:before 在旧版本里是伪类,在新版本里是伪元素,新版本下E:after、E:before会被自动识别为E::after、E::before,按伪元素来对待,这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到,目前只需要有个大致了解
E::first-letter文本的第一个字母或字(如中文、日文、韩文等);
案例:首字下沉
E::first-line 文本第一行; 文本第一行高亮..
E::selection 可改变选中文本的样式;
":" 与 "::" 区别在于区分伪类和伪元素
关于before和after CSS2中 E:before或者E:after,是属于伪类的,并且没有伪元素的概念 CSS3中 提出伪元素的概念 E::before和E::after,并且归属到了伪元素当中,伪类里就不再存在E:before或者 E:after伪类;
颜色
一种新的颜色的表示方式
rgba(255,0,0,0.1)
RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间。虽然它有的时候被描述为一个颜色空间
新增了RGBA、HSLA模式,其中的A 表示透明度通道,即可以设置颜色值的透明度,相较opacity,它们不具有继承性,即不会影响子元素的透明度。
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范围0~255
H 色调 取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
关于透明度:

1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
2 、transparent 不可调节透明度,始终完全透明
RGBA、HSLA可应用于所有使用颜色的地方。
案例: 1: opacity 设置透明度,只能针对整个盒子设置透明度. 2: 子盒子会继承父盒子的透明度. .out{ width: 200px; height: 200px; background: green; border: 1px solid darkgreen; margin: 40px auto; opacity: 0.3; } 子盒子也出现透明 .out .inner{ width: 100px; height: 100px; background-color: yellow; }
2:background-color: transparent; 完全透明,不可调节透明度.
3:使用rgba 来控制颜色,相对opacity ,不具有继承性.

文本 (shadow阴影)
text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
3、模糊度是不能为负值;
代码演示:
/* 3px 水平偏移量. 正值向右 负值向左/ / 5px 水垂直偏移量. 正值向下 负值向上/ / 5px 模糊度 模糊度不能为负值 值越大越模糊/ / #ccc 设置对象阴影的颜色. 可以有多个影子. ul>li{ margin: 20px; font-size: 24px; } ul>li:nth-child(1){ text-shadow: 5px 5px 2px #ccc; } ul>li:nth-child(2){ text-shadow: -5px -5px 2px #ccc; } ul>li:nth-child(3){ text-shadow: 5px 5px 2px #ccc, -5px -5px 2px #ccc; }
案例1:浮雕文字.
/设置背景色./ body { background-color: gray; font: bold 6em "microsoft yahei"; } div { margin: 30px; color: #808080; text-align: center; } /*设置水平向左1px 向上1 px 向右1px 向下1px */ .to{ text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; } .ao{ text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; }

盒模型
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
box-sizing 有两个值:content-box border-box
可以分成两种情况:
content-box:对象的实际宽度等于设置的width值和border、padding之和
border-box: 对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )
我们把这种方式叫做盒模型
兼容性比较好

1、边框
边框圆角:
border-radius:30px;
border-radius:30px 40px 50px 60px;
赋值规律: 从左上开始,顺时针赋值,如果这个角没有值 ,去对角;
border-radius: 40px/60px;
边框阴影:
box-shadow: 水平位移 垂直位移 模糊程度 阴影大小 阴影颜色 外/内阴影(inset)

边框图片:
    border-image-source: 图片路径
    border-image-slice: 裁剪
    border-image-width: 边框宽度
    border-image-repeat: 边框图片的平铺
        repeat:  图片显示不完整
        round: 图片平铺 优化了,图片会完整显示
        stretch: 拉伸

2、背景:
    背景可以改变大小,可以有多个背景
    background-size:  30px 30px;
    background-size:  30% 30%;
    background-size:  cover; 覆盖
    background-size:  contain; 包含

    可以有多个背景:
        多个背景按照正常的语法格式书写,每个背景使用逗号隔开


   背景原点:
     background-origin:
         content-box
         padding-box
         border-box

   背景裁剪
     background-clip:
         content-box
         padding-box
         border-box
3、渐变
    线性渐变:
        background-image: linear-gradient(方向,起始颜色,终止颜色);

        方向:to left right bottom top   35deg

    径向渐变:

CSS3
目录
目录 2
边框 2
边框圆角 2
边框阴影 4
边框图片 4
1.1.4案例 用css 实现 7
渐变 8
线性渐变 (gradient 变化) 8
径向渐变 (radial 径向) 10
背景 11
过渡(transition) 13
2D转换 17
边框
其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。
边框圆角
border-radius 每个角可以设置两个值 ,x 值,y值
1: 边框圆角处理
2: 正方形

3:椭圆

圆角处理时,脑中要形成圆、圆心、横轴、纵轴的概念,正圆是椭圆的一种特殊情况。如下图

可分别设置长、短半径,以“/”进行分隔,遵循“1,2,3,4”规则,“/”前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4位置 )

边框阴影
box-shadow 与 text/shadow 用法差不多
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
box-shadow: 5px 5px 27px red, -5px -5px 27px green;

3、模糊度是不能为负值;
4、inset可以设置内阴影;

设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。
可以设置多重边框阴影,实现更好的效果,增强立体感。
边框图片
border-image: url("images/border.png") 27/20px round
border-image 设置边框的背景图片.
border-image-source:url(“”) 设置边框图片的地址.
//裁剪图片,如何去裁切图片,浏览器会自动去裁剪图片.
border-image-slice:27,27,27,27
//指定边框的宽度.
border-image-width:20px;
//边框平铺的样式 stretch 拉升
round 会自动调整缩放比例
repeat(重复)
border-image-repeat: stretch;

设置的图片将会被“切割”成九宫格形式,然后进行设置。如下图

“切割”完成后生成虚拟的9块图形,然后按对应位置设置背景,
其中四个角位置、形状保持不变,中心位置水平垂直两个方向平铺。如下图

1、round和repeat之间的区别
round 会自动调整尺寸,完整显示边框图片。

repeat 单纯平铺多余部分,会被“裁切”而不能完整显示。

2、更改裁切尺寸
background-slice: 34 36 27 27 分别设置裁切如下图

关于边框图片重点理解9宫格的裁切及平铺方式,实际开发中应用不广泛,但是如能灵活动用会给我们带来不少便利。

1.1.4案例 用css 实现

代码实现:

渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
线性渐变 (gradient 变化)
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

上图是从黄色渐变到绿色
Background:linear-gradient(
To right 表示方向 (left,top,right,left ,也可以使用度数)
Yellow, 渐变起始颜色
Green 渐变终止颜色
)
background:linear-gradient( to right, red 0%, red 25% , blue 25%,blue 50%, green 50%,green 75%, pink 75% ,pink 100% ); //起止颜色,终止颜色.

background: linear-gradient( 135deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75% );
background-size: 100px 100px;
animation: move 1s linear infinite;
@keyframes move { from {} to { background-position: 100px 0; } }

1、必要的元素:
a、方向
b、起始颜色
c、终止色;
2、关于方向如下图

径向渐变 (radial 径向)
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

background: radial-gradient( 150px at center, yellow, green );
围绕中心点做渐变,半径是150px,从黄颜色到绿颜色做渐变.
1、必要的元素:
a、辐射范围即圆半径 (半径越大,渐变效果越大)
b、中心点 即圆的中心 (中心点的位置是以盒子自身)
background: radial-gradient( 150px at left center, yellow, green );
以左上角为圆的中心点
background: radial-gradient( 150px at 0px 0px, yellow, green );
c、渐变起始色
d、渐变终止色
2、关于中心点:中心位置参照的是盒子的左上角
3、关于辐射范围:其半径可以不等,即可以是椭圆

div{ width: 300px; height: 300px; margin:100px auto; background: radial-gradient( 250px at 0px 0px, yellow, green ); border-radius: 150px; }
背景
背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
background-size:width,height 可以设置背景图片的宽度以及高度
background-size设置背景图片的尺寸
background-size:600px,auto;
自动是适应盒子的宽度 background-size: 100% auto; 当宽度发送改变时,高度会有内容溢出。
常规用法,通过百分百,和像素来调整背景的尺寸.
background-size: auto 100%;

cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
整个背景图片完整显示在背景区域.
contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
也可以使用长度单位或百分比

案例:全屏背景自动适应.
background-origin(原点,起点)设置背景定位的原点
所谓的背景原点就是调整背景位置的一个参照点.
调整背景图片定位的参照原点.

border-box以边框做为参考原点;
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
3、background-clip设置背景区域clip(裁切)
border-box裁切边框以内为背景区域;
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
4、以逗号分隔可以设置多背景,可用于自适应局
背景图片尺寸在实际开发中应用十分广泛。

过渡(transition)
Transition:param1 param2
param1 要过渡的属性
param2 过渡的时间.
过渡是CSS3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画:扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。

transition-property设置过渡属性
transition-duration设置过渡时间 用来控制速度linear(匀速)
ease-in (加速)
transition-timing-function设置过渡速度
transition-delay设置过渡延时 超过时间后执行动画.
以上四属性重在理解
案例:气泡

案例2:手风琴效果

2D转换
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中,通过transform(变形) 来实现2d 或者3d 转换,其中2d 有,缩放,移动,旋转。
缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;

移动 translate(x, y) 可以改变元素的位置,x、y可为负值;
x 在水平方向移动。
y 在垂直方向移动。

旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;

案例1,火箭移动

案例2 盾牌,将位置还原

案例3 旋转 原点
transform-origin:left top;

1、 3d变换
rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)

2、透视:
加给变换元素的父盒子, 设置的是用户眼睛和屏幕的距离;
只是视觉上的呈现,不是正真的3d
perspective:1000px;

3、transform-style:preserve-3d;
加给变换元素的父盒子,让子盒子存在三维空间中,保持3d效果
flat:默认值 (让子盒子被扁平化)

4、 backface-visibility:hidden; 背面不可见

skew(30deg,30deg);  2d变换 -倾斜

css3中获取自定义属性的值:content:attr(data-text);

5、动画:
定义:
@keyframes 动画名{
0%{

        }

        100%{

        }

        或者
        from{}
        to{}
    }

    动画调用:
        animation: 动画名称 动画时间  执行次数  运动曲线 延迟执行 结束后状态 是否反向;
            inifnite: 无限次
            alternate: 反向执行
            forwards: 保持结束后的状态
            backwards: 保持动起开始前的状态
            steps(5): 让动画分步执行;

            动画详细属性:
                animation-name:动画名称
                animation-duration:持续时间
                animation-iteration-count:执行次数
                animation-timing-function:运动曲线
                animation-fill-mode:结束状态
                animation-direction: 动画方向
                animation-delay: 延迟时间


            多列:(了解)
                -webkit-column-count:列数
                -webkit-column-rule:分割线样式
                -webkit-column-width:列宽
                -webkit-column-gap:列间距
                -webkit-column-span:跨列 all 跨所有列

CSS3简介
如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
CSS3的现状
1、浏览器支持程度差,需要添加私有前缀
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
如何对待
1、坚持渐进增强原则
2、考虑用户群体
3、遵照产品的方案
4、听Boss的
准备工作
统一环境
由于CSS3兼容性问题的普遍存在,为了避免因兼容性带来的干扰,我们约定统一的环境,以保证学习的效率,在最后会单独说明兼容性的问题。
1、Chrome浏览器 version 46+
2、Firefox浏览器 firefox 42+
3、PhotoShop CS6(建议)
如何使用手册
学会使用工具,可以让我们事半功倍。

学会查看手册,培养自主学习能力。
基础知识
选择器
CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性
其特点是通过属性来选择元素,具体有以下5种形式:

见代码示例01 选择器-属性.html
伪类
除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。
1、结构(位置)伪类
以某元素(E)相对于其父元素或兄弟元素的位置来获取无素;

n遵循线性变化,其取值0、1、2、3、4、...
n可是多种形式:nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等;
注:指E元素的父元素,并对应位置的子元素必须是E
见代码示例02 选择器-伪类.html
2、空伪类
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
见代码示例03 选择器-伪类empty.html
3、目标伪类
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
见代码示例04 选择器-伪类target.html
4、排除伪类
E:not(selector) 除selector(任意选择器)外的元素会被选中;
见代码示例05 选择器-伪类not.html
伪元素
1、E::first-letter文本的第一个单词或字(如中文、日文、韩文等)
见代码示例07 选择器-伪元素first-letter.html
2、E::first-line 文本第一行;
见代码示例07 选择器-伪元素first-line.html
3、E::selection 可改变选中文本的样式;
见代码示例08 选择器-伪元素selection.html
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
见代码示例09 选择器-伪元素before&after.html
E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到,目前只需要有个大致了解
":" 与 "::" 区别在于区分伪类和伪元素
颜色
新增了RGBA、HSLA模式,其中的A 表示透明度通道,即可以设置颜色值的透明度,相较opacity,它们不具有继承性,即不会影响子元素的透明度。
如下图所示为颜色表示方法:

Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
不同的颜色表示方法其取值也不相同,具体如下:
R、G、B 取值范围0~255
见代码示例01 颜色-透明rgba.html
H 色调 取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
见代码示例02 颜色-透明hsla.html
RGBA、HSLA可应用于所有使用颜色的地方。
见代码示
关于CSS透明度:
1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
2 、transparent 不可调节透明度,始终完全透明
文本
text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。
如:text-shadow: 2px 2px 2px #CCC;
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
3、模糊度是不能为负值;
见代码示例01 文本-阴影text-shadow.html
盒模型
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:
1、box-sizing: border-box 盒子大小为 width
2、box-sizing: content-box 盒子大小为 width + padding + border
注:上面的标注的width指的是CSS属性里设置的width: length,content的值是会自动调整的。
见代码示例01 盒模型.html
边框
其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。
边框圆角
border-radius
圆角处理时,脑中要形成圆、圆心、横轴、纵轴的概念,正圆是椭圆的一种特殊情况。如下图

为了方便表述,我们将四个角标记成1、2、3、4,如2代表右上角,CSS里提供了border-radius来设置这些角横纵轴半径值。
见代码示例01 边框-圆角border-radius.html
分别设置横纵轴半径,以“/”进行分隔,遵循“1,2,3,4”规则,“/”前面的1~4个用来设置横轴半径(分别对应横轴1、2、3、4位置 ),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4位置 )。
支持简写模式,具体如下:
1、border-radius: 10px; 表示四个角的横纵轴半径都为10px;
2、border-radius: 10px 5px; 表示1和3角横纵轴半径都为10px,2和4角横纵轴半径为5px;
3、border-radius: 10px 5px 8px; 表示1角模纵轴半径都为10px,2和4角横纵轴半径都为8px,3角的横纵轴半径都为8px;
4、border-radius: 10px 8px 6px 4px; 表示1角横纵轴半径都为10px,表示2角横纵轴半径都为8px,表示3角横纵轴半径都为6px,表示4角横纵轴半径都为6px;
见代码示例02 边框-圆角-详解border-radius.html
边框阴影
box-shadow
与文字阴影类似,可分别设置盒子阴影偏移量、模糊度、颜色(可设透明度)。
如box-shadow: 5px 5px 5px #CCC
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
3、模糊度是不能为负值;
4、inset可以设置内阴影;
注:设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。可以设置多重边框阴影,实现更好的效果,增强立体感,符合渐进增强,实际开发中可以大胆使用。
见代码示例04 边框-阴影box-shadow.html
边框图片
border-image
设置的图片将会被“切割”成九宫格形式,然后进行设置。如下图

最少“4刀”便可以将一个图片切成9部分,“切割”完成后生成虚拟的9块图形,如下图

这时我们将一个盒子想象是由9部分组成的,分别是左上角、上边框、右上角、右边框、右下角、下边框、左下角、左边框、中间,那么浏览器会将切割好的9张虚拟图片分别对应到盒子的各个部分上。
其中四个角位置、形状保持不变,中心位置水平垂直两个方向平铺或拉伸,如下图

参数详解
1、border-image-source
指定图片路径
2、border-image-repeat
指定裁切好的虚拟图片的平铺方式
a) round会自动调整尺寸,完整显示边框图片

b)  repeat 单纯平铺,多余部分,会被“裁切”而不能完整显示。

3、border-image-slice

4、border-image-width
设置边框背景区域的大小,这个值的大小不会影响到盒子的大小。
见代码示例06 边框-图片border-image.html
关于边框图片重点理解9宫格的裁切及平铺方式,实际开发中应用不广泛,但是如能灵活动用会给我们带来不少便利。
背景
背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
background-size
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下:
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
见代码示例01 背景-尺寸background-size.html
2、background-origin
通过background-origin可以设置背景图片定位(background-position)的参照原点。
其参数设置如下:
border-box以边框做为参考原点;
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
见代码示例02 背景-原点background-origin.html
3、background-clip
通过background-clip,可以设置对背景区域进行裁切,即改变背景区域的大小。
其参数设置如下:
border-box裁切边框以内为背景区域;
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
见代码示例03 背景-裁切background-clip.html
4、多背景
以逗号分隔可以设置多背景,可用于自适应布局
见代码示例04 背景-多背景.html
渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。
线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果,如下图是从黄色渐变到绿色。

1、必要的元素:
借助Photoshop总结得出线性渐变的必要元素
a、方向
b、起始色
c、终止色
d、渐变距离
2、关于方向
设置渐变方向,可以用关键字如to top、to right,也可以用角度(正负值均可)如45deg、-90deg等,当以角度做为参数时,可参照下图来使用,0deg从下往上,90deg从左向右,进而可以推算出180deg从上向下。

见代码示例01 渐变-线性渐变linear-gradient.html
注:我们可以设置渐变的起始点,这个起始点的值可以是百分比形式,这个百分比在没有设置background-size时,是相对于盒子大小的,当设置了background-size时则是相对于background-size的。
径向渐变
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

1、必要的元素:
a) 辐射范围即圆半径
b) 中心点 即圆的中心
c) 渐变起始色
d) 渐变终止色
e) 渐变范围
2、关于中心点
中心位置参照的是盒子的左上角,例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角,background-image: radial-gradient(120px at 0 100% yellow green)其圆心为左下角。
3、关于辐射范围
其半径可以不等,即可以是椭圆,如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形(横轴120px、纵轴100px)的渐变。
见代码示例02 渐变-径向渐变radial-gradient.html
写在最后
关于渐变不同浏览器有不同的版本,即语法格式不一样,我们以最新语法为准,可自行查找资料了解即可。
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
过渡
过渡是CSS3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

见代码示例baidu.html
补间动画:自动完成从起始状态到终止状态的的过渡。
见代码示例01 体验过渡.html
关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指),就可以实现平滑的过渡,为了方便演示采用hover切换两种状态,但是并不仅仅局限于hover状态来实现过渡。
可以通过all设置所有属性的过渡效果,也可以分别设置某一属性的过渡效果,见代码示例03 过渡-宽高.html
可以将过渡属性transition设置在A或B状态,但是会有一些细节的差异,见代码示例03 过渡-颜色.html
transition属性拆解如下表:

见代码示例05 过渡-属性详解.html
2D转换
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。
1、移动 translate(x, y) 可以改变元素的位置,x、y可为负值;
a) 移动位置相当于自身原来位置
b) y轴正方向朝下
c) 除了可以像素值,也可以是百分比,相对于自身的宽度或高度
见代码示例01 2D转换-移动translate.html
2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数;
见代码示例02 2D转换-缩放scale.html
3、旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;
见代码示例03 2D转换-旋转rotate.html
a) 当元素旋转以后,坐标轴也跟着发生的转变
b) 调整顺序可以解决,把旋转放到最后
见代码示例05 综合使用例子.html
4、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0。
见代码示例04 2D转换-倾斜skew.html
5、矩阵matrix() 把所有的2D转换组合到一起,需要6个参数(了解)。
关于矩阵的学习资料
6、transform-origin可以调整元素转换的原点
见代码示例08 转换-原点transform-origin.html
我们可以同时使用多个转换,其格式为:transform: translate() rotate() scale() ...等,其顺序会影响转换的效果。
见代码示例05 综合使用例子.html
3D转换
1、左手坐标系
伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

2、CSS中的3D坐标系
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度,如下图

借助示例理解3D转换
a) 绕X轴旋转,见代码示例01 3D转换-旋转rotateX.html
b) 绕Y轴旋转,见代码示例02 3D转换-旋转rotateY.html
c) 绕Z轴旋转,见代码示例03 3D转换-旋转rotateZ.html
d) 在X轴移动,见代码示例04 3D转换-移动translateX.html
d) 在Y轴移动,见代码示例05 3D转换-移动translateY.html
d) 在Z2轴移动,见代码示例06 3D转换-移动translateZ.html
3、左手法则
左手握住旋转轴,竖起拇指指向旋转轴正方向,正向就是其余手指卷曲的方向。
4、透视(perspective)
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective有两种写法
a) 作为一个属性,设置给父元素,作用于所有3D转换的子元素
b) 作为transform属性的一个值,做用于元素自身
见代码示例07 3D转换-透视perspective.html
5、理解透视距离

透视会产生“近大远小”的效果
6、3D呈现(transform-style)
设置内嵌的元素在 3D 空间如何呈现,这些子元素必须为转换原素。
flat:所有子元素在 2D 平面呈现
preserve-3d:保留3D空间
见代码示例08 3D转换-透视transform-style.html
3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。
见代码示例09 3D转换-练习-立方体.html
7、backface-visibility
设置元素背面是否可见
见代码示例01 3D转换-应用-音乐盒.html
参考文档
CSS3动画库
animate.css
动画
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
1、必要元素:
a、通过@keyframes指定动画序列;
b、通过百分比将动画序列分割成多个节点;
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素;
2、关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度,linear、ease等
e、animation-play-state动画播放状态,running、paused等
f、animation-direction动画逆播,alternate等
g、animation-fill-mode动画执行完毕后状态,forwards、backwards等
h、animation-iteration-count动画执行次数,inifinate等
i、steps(60) 表示动画分成60步完成
参数值的顺序:
关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意
伸缩布局
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
如下图,学习新的概念:
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

1、必要元素:
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴,也可改变方向
2、各属性详解
a、flex-direction调整主轴方向(默认为水平方向)
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈(由flex-wrap产生的独立行)对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
h、order控制子项目的排列顺序,正序方式排序,从小到大
此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值可参考示例源码。
多列布局
类似报纸或杂志中的排版方式,上要用以控制大篇幅文本。
/* 分几列/-webkit-column-count:3;/ 分割线/-webkit-column-rule:1px dashed red;/设置列间距/-webkit-column-gap:60px;/ 列宽度//-webkit-column-width: 400px;*/

了解即可,实际意义不大。
Web字体
开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好,甚至IE低版本浏览器也能支持。
字体格式
不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。
推荐http://www.zhaozi.cn/http://www.youziku.com/ 查找更多中文字体
字体图标
其实我们可以把文字理解成是一种特殊形状的图片,反之我们是不是也可以把图片制作成字体呢?
答案是肯定的。
常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。
优点:
1、将所有图标打包成字体库,减少请求;
2、具有矢量性,可保证清晰度;
3、使用灵活,便于维护;
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
兼容性
通过http://caniuse.com/ 可查询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题。
高级应用
360导航官网

携程旅行

3D切割轮播图

1、
伸缩布局:
display:flex;

主轴 ,侧轴(垂直于主轴的方向)

主轴方向:flex-direction:
    row  row-reverse
    column column-reverse

主轴方向上的对齐方式:justify-content
    flex-start: 主轴开始
    flex-end: 主轴结束
    center: 居中
    space-around:平分
    sapce-between:两端对齐 中间平均


侧轴对齐方式:
      flex-start: 侧轴开始
      flex-end: 侧轴结束
      center: 居中
      baseline:基线对齐
      streth:拉伸

子盒子伸缩比例:
    flex: 1;
    如果某盒子不参与划分比里, 不写flex属性即可


2、图标字体
    优点:
    1、将所有图标打包成字体库,减少请求;
    2、具有矢量性,可保证清晰度;
    3、使用灵活,便于维护;

    使用步骤:
           1、引入字体包
           2、申明字体:告诉浏览器去哪找字体
           3、定义类名
           4、在结构中写 图标的编码,给标签添加类名


     伪元素中:
        &#xe628;  ----> content:"\e628";

    3-360全屏滚动案例

    鼠标滚轮事件:
        onmousewheel=function(){}

伸缩布局
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
如下图,学习新的概念:
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

1、必要元素:
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴,也可改变方向
2、各属性详解
a、flex-direction调整主轴方向(默认为水平方向)
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置
row 水平方向
reverse-row 反转
column 垂直方向
reverse-column 反转列
b、justify-content设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
flex-start、 起点对齐
flex-end、 终点对齐
center 中间对齐
space-around、 环绕
space-between 两端对齐
c、flex控制子项目的缩放比例
不指定flex 属性,则不参与分配
d、align-items设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
flex-start、 起点对齐
flex-end、 终点对齐
center 中间对齐
Strethc: 拉伸;

此知识点重在理解,要明确找出主轴、方向,各属性对应的属性值可参考示例源码
应用场景1:

应用场景2:

应用场景3-携程旅行

Web字体
开发人员可以为自已的网页指定特殊的字体,无需考虑用户电脑上是否安装了此特殊字体,从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好,甚至IE低版本浏览器也能支持。
字体格式
不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。
1、TureTpe(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。
下载字体的网站.
推荐http://www.zhaozi.cn/http://www.youziku.com/ 查找更多中文字体

字体图标
其实我们可以把文字理解成是一种特殊形状的图片,反之我们是不是也可以把图片制作成字体呢?
答案是肯定的。
常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。
优点:
1、将所有图标打包成字体库,减少请求;
2、具有矢量性,可保证清晰度;
3、使用灵活,便于维护;
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/
兼容性
通过http://caniuse.com/ 可查询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题。
我们需要知道每个属性,能被那个版本的浏览器支持.
高级应用
360 案例:
监听滚轮
var i=0; document.onmousewheel=function(){ console.log(i++); }
//需要处理兼容 (我们是靠监听滚轮的时间来处理)
//我们需要使用到插件. (滚屏插件) 基于jQuery 的一个插件.

jQuery fullPage 全屏滚动插件
中文网址:http://www.dowebok.com

相关说明:http://www.dowebok.com/77.html

对应的颜色
sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
loopTop:true , 滚到顶部 回到最后一屏;
js代码
$(function(){ $('#dowebok').fullpage({ sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'], loopTop:true, afterLoad:function( anchorLink ,index){ console.log(index); $('.section').removeClass('current'); setTimeout(function(){ $('.section').eq(index-1).addClass('current'); },100); } });});

推荐阅读更多精彩内容

  • CSS3简介 CSS3的现状 浏览器支持程度差,需要添加 私有前缀 ; 移动端支持优于PC端; 不断改进中; 应用...
    magic_pill阅读 106评论 0 1
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    Alleyine阅读 865评论 0 2
  • HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,007评论 0 3
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 83评论 0 0
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    poetries阅读 6,890评论 23 220