html5 css3基础知识详解
2017-03-09 18:29
513 查看
如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了
CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
Html4-html5 css2- css3
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
渐进增强: 让低版本浏览器 可以使用最基本的功能,高版本的浏览器具有更好的用户体验
2、考虑用户群体
3、遵照产品的方案
4、听Boss的
率,在最后会单独说明兼容性的问题。
1、Chrome浏览器 version
46+
2、Firefox浏览器 firefox
42+
3、PhotoShop
CS6(建议)
学会查看手册,培养自主学习能力。
其特点是通过属性来选择元素,具体有以下5种形式:
1、结构(位置)伪类
以某元素(E)相对于其父元素或兄弟元素的位置来获取无素;
n遵循线性变化,其取值0、1、2、3、4、...
n可是多种形式:nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等;
注:指E元素的父元素,并对应位置的子元素必须是E
2、空伪类
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
3、目标伪类
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
4、排除伪类
E:not(selector) 除selector(任意选择器)外的元素会被选中;
2、E::first-line 文本第一行;
3、E::selection 可改变选中文本的样式;
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到,目前只需要有个大致了解
":" 与 "::" 区别在于区分伪类和伪元素
如下图所示为颜色表示方法:
RGBA
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
不同的颜色表示方法其取值也不相同,具体如下:
R、G、B 取值范围0~255
HSLA
H 色调 取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
RGBA、HSLA可应用于所有使用颜色的地方。
见代码示
关于CSS透明度:
1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
2 、transparent 不可调节透明度,始终完全透明
如:text-shadow: 2px 2px 2px #CCC;
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
3、模糊度是不能为负值;
方式就发生了改变。
可以分成两种情况:
1、box-sizing:
border-box 盒子大小为 width
2、box-sizing:
content-box 盒子大小为 width + padding +
border
注:上面的标注的width指的是CSS属性里设置的width:
length,content的值是会自动调整的。
需要重点掌握。
圆角处理时,脑中要形成圆、圆心、横轴、纵轴的概念,正圆是椭圆的一种特殊情况。如下图
为了方便表述,我们将四个角标记成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: 5px 5px 5px #CCC
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
3、模糊度是不能为负值;
4、inset可以设置内阴影;
注:设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。可以设置多重边框阴影,实现更好的效果,增强立体感,符合渐进增强,实际开发中可以大胆使用。
background-size
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应
用非常广泛。
其参数设置如下:
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
2、background-origin
通过background-origin可以设置背景图片定位(background-position)的参照原点。
其参数设置如下:
border-box以边框做为参考原点;
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
3、background-clip
通过background-clip,可以设置对背景区域进行裁切,即改变背景区域的大小。
其参数设置如下:
border-box裁切边框以内为背景区域;
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
4、多背景
以逗号分隔可以设置多背景,可用于自适应布局
用数量,并且具有很强的适应性和可扩展性。
1、必要的元素:
借助Photoshop总结得出线性渐变的必要元素
a、方向
b、起始色
c、终止色
d、渐变距离
2、关于方向
设置渐变方向,可以用关键字如to top、to
right,也可以用角度(正负值均可)如45deg、-90deg等,当以角
度做为参数时,可参照下图来使用,0deg从下往上,90deg从左向右,进而可以推算出180deg从上向下。
注:我们可以设置渐变的起始点,这个起始点的值可以是百分比形式,这个百分比在没有设置background-size时,是相对于盒子大小的,当设置了background-size时则是相对于background-size的。
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)的渐变。
写在最后
关于渐变不同浏览器有不同的版本,即语法格式不一样,我们以最新语法为准,可自行查找资料了解即可。
http://www.w3cplus.com/css3/new-css3-linear-gradient.html
动画效果。
帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
见代码示例baidu.html
补间动画:自动完成从起始状态到终止状态的的过渡。
见代码示例01 体验过渡.html
关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
在CSS3里使用transition可以实现补间动画(过渡效果),并且当前元素只要有“属性”发生变化时即存在
两种状态(我们用A和B代指),就可以实现平滑的过渡,为了方便演示采用hover切换两种状态,但是并不
仅仅局限于hover状态来实现过渡。
可以通过all设置所有属性的过渡效果,也可以分别设置某一属性的过渡效果,可以将过渡属性transition设置
在A或B状态,但是会有一些细节的差异,
transition属性拆解如下表:
�� 2 ҳ
需要重点掌握。
每个角可以设置两个值
,x
值,y值
圆角处理时,
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(1).png)
脑中要
形成圆、圆心、横轴、纵轴的概念,正圆是椭圆的一种特殊情况。如下图
可分别设置长、短半径,以“/”进行分隔,遵循“1,2,3,4”规则,“/”前面的1~4个用来设置横轴半
径(分别对应横轴1、2、3、4位置
),“/”后面1~4个参数用来设置纵轴半径(分别对应纵轴1、2、3、4
位置
)
与
text-shadow
用法差不多
1、水平偏移量
正值向右
负值向左;
2、垂直偏移量
正值向下
负值向上;
box-shadow: 5px 5px 27px red, -5px -5px 27px green;
3、模糊度是不能为负值;
4、inset可以设置内阴影;
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(3).png)
设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。
可以设置多重边框阴影,实现更好的效果,增强立体感。
1.1.4案例
用数量,并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。
上图是从黄色渐变到绿色
Background:linear-gradient(
To right
表示方向
(left,top,right,left ,也可以使用度数)
Yellow,
渐变起始颜色
Green
渐变终止颜色
)
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(6).png)
1、必要的元素:
a、方向
b、起始颜色
c、终止色;
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image.jpg)
2、关于方向如下图
径向渐变
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;
}
background-size:width,height
可以设置背景图片的宽度以及高度
background-size设置背景图片的尺寸
[align=left] background-size:600px,auto;[/align]
[align=left] 自动是适应盒子的宽度[/align]
background-size: 100% auto; 当宽度发送改变时,高度会有内容溢出。
[align=left] 常规用法,通过百分百,和像素来调整背景的尺寸.[/align]
background-size:
auto
100%;
[align=left] [/align]
[align=left]cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。[/align]
[align=left]整个背景图片完整显示在背景区域.[/align]
[align=left]contain会自动调整缩放比例,保证图片始终完整显示在背景区域。[/align]
[align=left]也可以使用长度单位或百分比[/align]
[align=left]案例:全屏背景自动适应.[/align]
background-origin(原点,起点)设置背景定位的原点
[align=left]所谓的背景原点就是调整背景位置的一个参照点.[/align]
[align=left]调整背景图片定位的参照原点.[/align]
border-box以边框做为参考原点;
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
3、background-clip设置背景区域clip(裁切)
border-box裁切边框以内为背景区域;
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
4、以逗号分隔可以设置多背景,可用于自适应局
背景图片尺寸在实际开发中应用十分广泛。
param1
要过渡的属性
param2
过渡的时间.
过渡是CSS3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作
动画效果。
补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画:扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。
transition-property设置过渡属性
transition-duration设置过渡时间
用来控制速度linear(匀速)
ease-in (加速)
transition-timing-function设置过渡速度
transition-delay设置过渡延时
超过时间后执行动画
以上四属性重在理解
2D转换
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配
合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。在css3
当中,通过
transform(变形)
来实现2d
或者3d
转换,其中2d
有,缩放,移动,旋转,扭曲。
缩放
scale (x, y)
可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;
移动
translate(x, y)
可以改变元素的位置,x、y可为负值;
x
在水平方向移动。
y
在垂直方向移动。
旋转
rotate(30deg)
可以对元素进行旋转,正值为顺时针,负值为逆时针;
skew(30deg,30deg)
倾斜
[align=left] x沿着水平方向倾斜[/align]
[align=left] y沿着水平方向倾斜[/align]
[align=left]案例1,火箭移动[/align]
案例2
盾牌,将位置还原
案例3
旋转
原点
1、3d变换
rotateX() 沿着x轴旋转
rotateY() 沿着y轴旋转
rotateZ() 沿着z轴旋转
translateX() 沿x轴位移
translateY() 沿Y轴位移
translateZ() 沿Z轴位移 translateZ 需要配合透视使用
旋转方向:
对着正方向去看 都是顺时针旋转
backface-visibility:hidden 背面不可见
伪元素 获取自定义属性的值
content:attr(data-text);
// 自定义属性的作用 存储数据
<span data-text="传">传</span
>
透视
如果希望看到 3d效果 需要添加透视 近大远小
透视 设置是 盒子 和 用户眼睛的距离,加给变换元素的父盒子
透视的值越大效果越不明显 perspective:1000px;
透视产生的3d效果,只是视觉上的呈现,并不是真正的3d
真正的3d的盒子
让子盒子保持真正的3d效果
transform-style:perserve-3d;
注意点:加给 父盒子
动画:
css3中也可以来定义动画
和 js使用函数类似 先定义 在调用
function say(){}
定义动画:
@keyframes 动画名称{
from{
起始状态
}
to{
结束状态
}
}
@keyframes 动画名称{
0%{
}
30%{
}
100%{
}
}
调用动画
animation: 动画名称 持续时间 ;
调用动画: 动画名称 持续时间 执行次数 是否反向 延迟执行 运动曲线..
动画名称: animation-name: move
单次动画执行时间:animation-duration: 2s;
重复次数 animation-iteration-count: 1; infinite 无数次
动画方向:animation-direction alternate:交替 reverse 反向
动画延迟:animation-delay: 1s;
动画结束后的所保持的状态:
backwards:保持动画开始前的状态
forwards:保持动画结束后的状态
运动曲线:animation-timing-function
linear 运算 ease-in-out :先加速后减速 steps
steps(n) 让动画分步完成
animation-timing-function: steps(15);
动画的播放状态 :paused 暂停 running 运行
animation-play-state: paused;
CSS2的众多不足之处,使得Web开发变得更为高效和便捷。
Html4-html5 css2- css3
CSS3的现状
1、浏览器支持程度差,需要添加私有前缀2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
如何对待
坚持渐进增强原则渐进增强: 让低版本浏览器 可以使用最基本的功能,高版本的浏览器具有更好的用户体验
2、考虑用户群体
3、遵照产品的方案
4、听Boss的
准备工作
统一环境
由于CSS3兼容性问题的普遍存在,为了避免因兼容性带来的干扰,我们约定统一的环境,以保证学习的效率,在最后会单独说明兼容性的问题。
1、Chrome浏览器 version
46+
2、Firefox浏览器 firefox
42+
3、PhotoShop
CS6(建议)
如何使用手册
学会使用工具,可以让我们事半功倍。[align=left]元字符[/align] | [align=left]含义[/align] | [align=left]示例[/align] |
[align=left][][/align] | [align=left]全部可选项[/align] | [align=left]padding: [<length> | <percentage>]{1, 4}[/align] |
[align=left]||[/align] | [align=left]并列[/align] | [align=left]border: <line-width> || <line-style> || <color>[/align] |
[align=left]|[/align] | [align=left]多选一[/align] | [align=left]position: static | relative | absolute | fixed[/align] |
[align=left]?[/align] | [align=left]0个或1个[/align] | box-shadow: none | <shadow>[, <shadow>]* [align=justify]<shadow>: inset? && <length>{2, 4} && <color>?[/align] |
[align=left]*[/align] | [align=left]0个或多个[/align] | |
[align=left]{}[/align] | [align=left]范围[/align] |
基础知识
属性选择器
CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。其特点是通过属性来选择元素,具体有以下5种形式:
[align=left]选择器[/align] | [align=left]示例[/align] | [align=left]含义[/align] |
[align=left]E[attr][/align] | [align=left]存在attr属性即可[/align] | |
[align=left]E[attr=val][/align] | [align=left]属性值完全等于val[/align] | |
[align=left]E[attr*=val][/align] | [align=left]属性值里包含val字符并且在“任意”位置[/align] | |
[align=left]E[attr^=val][/align] | [align=left]属性值里包含val字符并且在“开始”位置[/align] | |
[align=left]E[attr$=val][/align] | [align=left]属性值里包含val字符并且在“结束”位置[/align] |
伪类
除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。1、结构(位置)伪类
以某元素(E)相对于其父元素或兄弟元素的位置来获取无素;
[align=left]选择器[/align] | [align=left]示例[/align] | [align=left]含义[/align] |
[align=left]E:first-child[/align] | [align=left]其父元素的第1个子元素[/align] | |
[align=left]E:last-child[/align] | [align=left]其父元素的最后1个子元素[/align] | |
[align=left]E:nth-child(n)[/align] | [align=left]其父元素的第n个子元素[/align] | |
[align=left]E:nth-last-child(n)[/align] | [align=left]其父元素的第n个子元素(倒着数)[/align] |
n可是多种形式:nth-child(2n+0)、nth-child(2n+1)、nth-child(-1n+3)等;
注:指E元素的父元素,并对应位置的子元素必须是E
2、空伪类
E:empty 选中没有任何子节点的E元素;(使用不是非常广泛)
3、目标伪类
E:target 结合锚点进行使用,处于当前锚点的元素会被选中;
4、排除伪类
E:not(selector) 除selector(任意选择器)外的元素会被选中;
伪元素
1、E::first-letter文本的第一个单词或字(如中文、日文、韩文等)2、E::first-line 文本第一行;
3、E::selection 可改变选中文本的样式;
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素,该元素为行内元素,且必须要结合content属性使用。
E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。
E:after、E:before后面的练习中会反复用到,目前只需要有个大致了解
":" 与 "::" 区别在于区分伪类和伪元素
颜色
新增了RGBA、HSLA模式,其中的A 表示透明度通道,即可以设置颜色值的透明度,相较opacity,它们不具有继承性,即不会影响子元素的透明度。如下图所示为颜色表示方法:
RGBA
Red、Green、Blue、Alpha即RGBA
Hue、Saturation、Lightness、Alpha即HSLA
不同的颜色表示方法其取值也不相同,具体如下:
R、G、B 取值范围0~255
HSLA
H 色调 取值范围0~360,0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
RGBA、HSLA可应用于所有使用颜色的地方。
见代码示
关于CSS透明度:
1、opacity只能针对整个盒子设置透明度,子盒子及内容会继承父盒子的透明度;
2 、transparent 不可调节透明度,始终完全透明
文本
text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。如:text-shadow: 2px 2px 2px #CCC;
1、水平偏移量 正值向右 负值向左;
2、垂直偏移量 正值向下 负值向上;
3、模糊度是不能为负值;
盒模型
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的值是会自动调整的。
边框
其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。
边框圆角
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可以设置内阴影;
注:设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。可以设置多重边框阴影,实现更好的效果,增强立体感,符合渐进增强,实际开发中可以大胆使用。
背景
背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。background-size
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应
用非常广泛。
其参数设置如下:
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
2、background-origin
通过background-origin可以设置背景图片定位(background-position)的参照原点。
其参数设置如下:
border-box以边框做为参考原点;
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
3、background-clip
通过background-clip,可以设置对背景区域进行裁切,即改变背景区域的大小。
其参数设置如下:
border-box裁切边框以内为背景区域;
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
4、多背景
以逗号分隔可以设置多背景,可用于自适应布局
渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。
线性渐变(渐进增强原则)
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果,如下图是从黄色渐变到绿色。1、必要的元素:
借助Photoshop总结得出线性渐变的必要元素
a、方向
b、起始色
c、终止色
d、渐变距离
2、关于方向
设置渐变方向,可以用关键字如to top、to
right,也可以用角度(正负值均可)如45deg、-90deg等,当以角
度做为参数时,可参照下图来使用,0deg从下往上,90deg从左向右,进而可以推算出180deg从上向下。
注:我们可以设置渐变的起始点,这个起始点的值可以是百分比形式,这个百分比在没有设置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)的渐变。
写在最后
关于渐变不同浏览器有不同的版本,即语法格式不一样,我们以最新语法为准,可自行查找资料了解即可。
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设置所有属性的过渡效果,也可以分别设置某一属性的过渡效果,可以将过渡属性transition设置
在A或B状态,但是会有一些细节的差异,
transition属性拆解如下表:
[align=left]属性[/align] | [align=left]示例[/align] | [align=left]含义[/align] |
[align=left]transition-property[/align] | 设置过渡属性 | |
[align=left]transition-duration[/align] | 设置过渡时间 | |
[align=left]transition-timing-function[/align] | 设置过渡速度 | |
[align=left]transition-delay[/align] | 设置过渡延时 |
单词
empty | 空的;无意义的;无知的; | 英 ['em(p)tɪ] |
letter | 信;字母,文字; | 英 ['letə] |
transparent | 透明的;显然的;坦率的;易懂的 | 美 [træns'pærənt] |
shodow | 阴影;影子;幽灵;庇护;隐蔽处 | 美 ['ʃædo] |
origin | 起源;原点;出身;开端 | 美 ['ɔrɪdʒɪn] |
clip | 剪;剪掉;缩短 | 美 [klɪp] |
gradient | 梯度;坡度;倾斜度 | 美 ['ɡredɪənt] |
radial | 半径的;放射状的;光线的;光线状的 | 美 ['redɪəl] |
边框
其中边框圆角、边框阴影属性,应用十分广泛,兼容性也相对较好,具有符合渐进增强原则的特征,我们需要重点掌握。
边框圆角
border-radius每个角可以设置两个值
,x
值,y值
圆角处理时,
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(1).png)
脑中要
形成圆、圆心、横轴、纵轴的概念,正圆是椭圆的一种特殊情况。如下图
可分别设置长、短半径,以“/”进行分隔,遵循“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可以设置内阴影;
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(3).png)
设置边框阴影不会改变盒子的大小,即不会影响其兄弟元素的布局。
可以设置多重边框阴影,实现更好的效果,增强立体感。
1.1.4案例
用css
实现
渐变
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。
可分为线性渐变、径向渐变
线性渐变
(gradient
变化)
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。上图是从黄色渐变到绿色
Background:linear-gradient(
To right
表示方向
(left,top,right,left ,也可以使用度数)
Yellow,
渐变起始颜色
Green
渐变终止颜色
)
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(6).png)
1、必要的元素:
a、方向
b、起始颜色
c、终止色;
![](http://blog.csdn.net/itzhongzi/article/details/file:/C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image.jpg)
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设置背景图片的尺寸
[align=left] background-size:600px,auto;[/align]
[align=left] 自动是适应盒子的宽度[/align]
background-size: 100% auto; 当宽度发送改变时,高度会有内容溢出。
[align=left] 常规用法,通过百分百,和像素来调整背景的尺寸.[/align]
background-size:
auto
100%;
[align=left] [/align]
[align=left]cover会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。[/align]
[align=left]整个背景图片完整显示在背景区域.[/align]
[align=left]contain会自动调整缩放比例,保证图片始终完整显示在背景区域。[/align]
[align=left]也可以使用长度单位或百分比[/align]
[align=left]案例:全屏背景自动适应.[/align]
background-origin(原点,起点)设置背景定位的原点
[align=left]所谓的背景原点就是调整背景位置的一个参照点.[/align]
[align=left]调整背景图片定位的参照原点.[/align]
border-box以边框做为参考原点;
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
3、background-clip设置背景区域clip(裁切)
border-box裁切边框以内为背景区域;
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
4、以逗号分隔可以设置多背景,可用于自适应局
背景图片尺寸在实际开发中应用十分广泛。
过渡(transition)
Transition:param1 param2param1
要过渡的属性
param2
过渡的时间.
过渡是CSS3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作
动画效果。
补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态
帧动画:扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。
transition-property设置过渡属性
transition-duration设置过渡时间
用来控制速度linear(匀速)
ease-in (加速)
transition-timing-function设置过渡速度
transition-delay设置过渡延时
超过时间后执行动画
以上四属性重在理解
2D转换
transform
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。在css3
当中,通过
transform(变形)
来实现2d
或者3d
转换,其中2d
有,缩放,移动,旋转,扭曲。
缩放
scale (x, y)
可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,不可为负值;
移动
translate(x, y)
可以改变元素的位置,x、y可为负值;
x
在水平方向移动。
y
在垂直方向移动。
旋转
rotate(30deg)
可以对元素进行旋转,正值为顺时针,负值为逆时针;
skew(30deg,30deg)
倾斜
[align=left] x沿着水平方向倾斜[/align]
[align=left] y沿着水平方向倾斜[/align]
[align=left]案例1,火箭移动[/align]
案例2
盾牌,将位置还原
案例3
旋转
原点
单词:
transition | 过渡;转变; | [træn'zɪʃən] |
property | 性质,性能;财产;所有权 | ['prɑpɚti] |
duration | 持续,持续的时间,期间 | [du'reʃən] |
transform | 改变,使…变形;转换 | [træns'fɔrm] |
scale | 规模;比例; | [skel] |
rotate | 旋转;循环 | ['rotet] |
translate | 转变为;调动 | [træns'let] |
skew | . 斜交;歪斜 | [skjuː] |
perspective | 观点;远景;透视图 | [pɚ'spɛktɪv] |
preserve | 保存;保护;维持; | [prɪ'zɝv]] |
animation | 活泼,生气;激励;卡通片绘制 | [,ænɪ'meʃən] |
iteration | 迭代;反复;重复 | [,ɪtə'reʃən] |
inifinite | 无限的,无穷的;无数的;极大的 | ['ɪnfɪnət] |
alternate | 使交替;使轮流 | ['ɔltɚnət] |
rotateX() 沿着x轴旋转
rotateY() 沿着y轴旋转
rotateZ() 沿着z轴旋转
translateX() 沿x轴位移
translateY() 沿Y轴位移
translateZ() 沿Z轴位移 translateZ 需要配合透视使用
旋转方向:
对着正方向去看 都是顺时针旋转
backface-visibility:hidden 背面不可见
伪元素 获取自定义属性的值
content:attr(data-text);
// 自定义属性的作用 存储数据
<span data-text="传">传</span
>
透视
如果希望看到 3d效果 需要添加透视 近大远小
透视 设置是 盒子 和 用户眼睛的距离,加给变换元素的父盒子
透视的值越大效果越不明显 perspective:1000px;
透视产生的3d效果,只是视觉上的呈现,并不是真正的3d
真正的3d的盒子
让子盒子保持真正的3d效果
transform-style:perserve-3d;
注意点:加给 父盒子
动画:
css3中也可以来定义动画
和 js使用函数类似 先定义 在调用
function say(){}
定义动画:
@keyframes 动画名称{
from{
起始状态
}
to{
结束状态
}
}
@keyframes 动画名称{
0%{
}
30%{
}
100%{
}
}
调用动画
animation: 动画名称 持续时间 ;
调用动画: 动画名称 持续时间 执行次数 是否反向 延迟执行 运动曲线..
动画名称: animation-name: move
单次动画执行时间:animation-duration: 2s;
重复次数 animation-iteration-count: 1; infinite 无数次
动画方向:animation-direction alternate:交替 reverse 反向
动画延迟:animation-delay: 1s;
动画结束后的所保持的状态:
backwards:保持动画开始前的状态
forwards:保持动画结束后的状态
运动曲线:animation-timing-function
linear 运算 ease-in-out :先加速后减速 steps
steps(n) 让动画分步完成
animation-timing-function: steps(15);
动画的播放状态 :paused 暂停 running 运行
animation-play-state: paused;
相关文章推荐
- html5 css3基础知识
- HTML5 和CSS3 基础知识
- 摄影基础知识详解
- Windows API-GDI入门基础知识详解(1)
- 软件开发的基础知识—软件版本号详解
- Linux操作系统文件系统基础知识详解
- 安全基础知识 最强0到33600端口详解(4)
- [HTML基础知识]Meta标签详解
- 安全基础知识最强0到33600端口详解
- Cisco路由技术基础知识详解
- 安全基础知识 最强0到33600端口详解(5)
- JAVA基础-其全面详解Java基础知识(一)
- JSP数据库基础知识 语法详解
- Windows API-GDI入门基础知识详解 来源: PConline.com.cn
- Cisco路由技术基础知识详解
- [收集]关于句柄的基础知识详解
- Windows API-GDI入门基础知识详解
- 盘启动区基础知识(一) WINNT.SIF 详解
- 安全基础知识 最强0到33600端口详解(2)
- Cisco路由技术基础知识详解