一、CSS3新特性
CSS3具有一些新特性,由于w3c制定标准慢,尚未制定完毕,只是初稿时,浏览器厂商快速加入新属性的支持,加前缀。w3c确定标准后,才全面支持,去掉前缀。
具体属性的支持可在W3C网页查看
1、边框
(1)圆角边框
- border-radius: 水平值,垂直值(填一个默认为圆形即所填=水平值=垂直值)
- 左上角的形状border-top-left-radius: 水平值,垂直值
- 右上角的形状border-top-right-radius: 水平值,垂直值
- 左下角的形状border-bottom-left-radius: 水平值,垂直值
- 右下角的形状border-bottom-right-radius: 水平值,垂直值
这里的水平值和垂直值,指的是一其为横轴,纵轴构造的椭圆或者圆 在相应位置的边线作为边框。
例如:
椭圆边线边框和圆形边线边框
胶囊状边框:上下的圆重合了
同理,修改宽度,构造正方向盒子,添加适合的值可以构造圆形内容区域
(2)阴影box-shadow
- box-shadow:(方式)水平偏移 垂直偏移 模糊距离 阴影大小 颜色
- 方式
- outset 默认值,外部阴影
- inset 可选,内部阴影
- outset 默认值,外部阴影
- 水平偏移、垂直偏移:阴影以左上角为原点,向右向下为正方向偏移的距离。可为负值,即向左向上偏移
- 模糊距离:阴影最外边模糊的范围
- 阴影的大小:默认为0即为原大小。设置一个值表示四个方向增大或者减小的尺寸
- 颜色:阴影的颜色
- 方式
(3)图片边框
border-image:source slice width repeat
- border-image-source 用在边框的图片的路径
- border-image-slice 图片边框向内偏移。
- 分为横向距离和纵向距离两个值,两条线将图片分割为九个区域
- 分为横向距离和纵向距离两个值,两条线将图片分割为九个区域
- border-image-width 图片边框的宽度。
- 若不设置则会继承
- border-image-outset 边框图像区域超出边框的量。
- 定义边框图像可超出边框盒的大小,默认为0。定义四个值和设置padding、margin一样
- border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。
- 由slice切割的四个角保留,四个方向上的边框进行相应的repeat方式操作
- 由slice切割的四个角保留,四个方向上的边框进行相应的repeat方式操作
注意:border-image 必须与 border 配合使用。先指定出宽度和类型
2、文本与文字
(1)文本阴影text-shadow
类似边框阴影box-shadow
- text-shadow:水平偏移 垂直偏移 阴影模糊大小 颜色
- 常见几种设计:
- 描边
- 浮雕:字体白,阴影黑
- 描边
(2)允许长单词、URL强制进行换行
表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。
- word-wrap: 方式
- normal:不换行
- break-word:换行
(3)@font-face 规则
我们平显示的字体,都会在硬盘中有相应文件。而想要在Web上显示特殊的体系,需要用户自行下载对应的字体包,这样太过麻烦。我们将字体文件放入WEB站点目录下使用@font-face 进行调用。用户解析到时就会从服务器自动下载字体进行显示。
不同的浏览器对字体文件格式支持不同。假若下载字体只有一种.ttf格式,可以通过查阅一些网址或者软件,生成其他格式。
使用样例:
(4)其他文本控制
文本溢出处理:
white-space:规定段落中的文本不进行换行
- normal:默认。空白会被浏览器忽略。
- pre:空白会被浏览器保留。其行为方式类似 HTML 中的
<pre>
标签。 - nowrap:文本不会换行,文本会在在同一行上继续,直到遇到
<br>
标签为止。 - pre-wrap:保留空白符序列,但是正常地进行换行。
- pre-line:合并空白符序列,但是保留换行符。
text-overflow:当文本溢出包含元素时发生的事情
- clip:修剪文本。
- ellipsis:显示省略符号来代表被修剪的文本。
- 通常配合下面使用
- white-space: nowrap;
- overflow: hidden;
- string:使用给定的字符串来代表被修剪的文本。
其他属性自行查阅
3、2D变换和3D变换
(1)2D变换:对元素进行旋转、缩放、移动、拉伸
- transform:
- 旋转rotate()
- 值为 XXdeg,可正可负,代表顺时针和逆时针旋转
- 放缩scale(x,y)
- x:水平方向缩放的倍数
- y:垂直方向缩放的倍数,若省略,同x
- 0~1,缩小;>1放大
- 倾斜skew(x_deg,y_deg)
- 能够让元素倾斜显示,该函数包含两个参数值,分别用来定义X轴和Y轴坐标倾斜的角度。如果省略了第二个参数,则取默认值0。
- 更改变换的中心点transform-origin: x-axis y-axis z-axis;
- 默认值分别为50% 50% 0
- 旋转rotate()
(2)3D变换
transform-style: preserve(3d)
向右X相上Y透过屏幕向客户Z
rotateX(deg)
- 如果值为正,元素将围绕X轴顺时针旋转;反之,如果值为负,元素围绕X轴逆时针旋转。
rotateY(deg)
- 如果值为正,元素将围绕X轴顺时针旋转;反之,如果值为负,元素围绕Y轴逆时针旋转。
rotateZ(deg)
- 如果值为正,元素将围绕X轴顺时针旋转;反之,如果值为负,元素围绕Z轴逆时针旋转。
无透视下旋转效果:
透视(眼睛到舞台的距离)perspective: px
透视下的旋转效果
设置3D变换,需要将内容放在父容器内,需要变换的父容器(可多个)再放入舞台内。父容器决定旋转关系,舞台决定透视关系。
还有更多的3D变换内容,自行查阅
4、过渡与动画
(1)过渡transition
- transition:属性名 持续时间 过渡方法 何时开始;参数必须按照顺序进行定义,不能颠倒。
- transition-property,规定应用过渡的 CSS 属性的名称。
- none:没有属性会获得过渡效果。
- all:所有属性都将获得过渡效果。
- property:多个属性名称之间以逗号分隔。
- transition-duration 定义过渡效果花费的时间。
- 默认值为0,常用单位是秒(s)或者毫秒(ms)
- transition-timing-function 规定过渡效果的时间曲线。
实际上是定义了cubic-bezier(n,n,n,n)的四个特殊的值,也可以自己设置。
- transition-delay 规定过渡效果何时开始。
- 默认值为0,常用单位是秒(s)或者毫秒(ms)。当设置为负数时,过渡动作会从该时间点开始,之前的动作被截断;设置为正数时,过渡动作会延迟触发。
- transition-property,规定应用过渡的 CSS 属性的名称。
例如:
(2)动画animation
- @keyframe name{}定义关键帧
- 例如:
帧的名字一般用%多少来设置
- 例如:
- animation:引用 @keyframes 动画的名称 动画完成时间 规定动画的速度曲线 何时开始;和transition类似。就是属性改成了自己设置的动画关键帧
- animation-name @keyframes 动画的名称
- 填设置的动画的名称
- animation-duration 动画完成时间
- 默认值为0,常用单位是秒(s)或者毫秒(ms)
- animation-timing-function 规定动画的速度曲线。默认是 “ease”。
实际上是定义了cubic-bezier(n,n,n,n)的四个特殊的值,也可以自己设置。
- animation-delay 规定动画何时开始。
- 允许负值,例:-2s 使动画马上开始,但跳过 2 秒进入动画。
- animation-play-state 规定动画是否正在运行或暂停。
- running(运动)|paused(暂停)
- 常用于鼠标进入盒子停止播放。
- animation-iteration-count 规定动画被播放的次数。
- n 定义动画播放次数的数值。
- infinite 规定动画应该无限次播放。
- animation-direction 规定动画是否在下一周期逆向地播放。
- normal|alternate
- 如果 animation-direction 值是 “alternate”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。
- 注意:如果把动画设置为只播放一次,则该属性没有效果!
- animation-fill-mode 规定对象动画时间之外的状态。
- none 无
- forward 动画结束(to里面的所有样式)时的状态
- backward 动画开始(from里面的所有样式)时的状态
- both 动画开始或者结束时的状态。
- animation-name @keyframes 动画的名称
(3)过渡与动画的区别
过渡属性transition可以在一定的时间内实现元素的状态过渡为最终状态,用于模拟一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果;而动画属性 animation 可以制作类似Flash动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。
transition需要触发一个事件(大多是另一个CSS例如鼠标悬停)才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果
过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。
5、滤镜filter
定义了元素(通常是<img>
)的可视效果(例如:模糊与饱和度)
具体函数设定再查阅
二、HTML5
HTML5中具有很大的语义化倾向
有了header、nav、footer、aside、content等标签可直接使用,减少了使用div的语义不明。
有了em、strong取代i和b的语义不明确标签。
有了自定义列表dl、列表项dt、描述dd
具体请查询HTML5。