Web系统设计【四】

一、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 可选，内部阴影
- 水平偏移、垂直偏移：阴影以左上角为原点，向右向下为正方向偏移的距离。可为负值，即向左向上偏移
- 模糊距离：阴影最外边模糊的范围
- 阴影的大小:默认为0即为原大小。设置一个值表示四个方向增大或者减小的尺寸
- 颜色：阴影的颜色

box-shadow详解

(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方式操作

注意：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

(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）。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。

例如：

(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 动画开始或者结束时的状态。